<dt>と<dd>をそれぞれ２連続させて書いた場合、どのように解釈される？

CSSでのレイアウトの都合上、
上の並びのものを下の並びに変える必要があるのですが、

<dt>が２連続して、<dd>が２連続した場合、１つ目のdtが１つ目のddに対応し、２つ目のdtが2つ目のddに対応したものとして、マークアップ的に解釈されるのでしょうか？

<dt>名前</dt>
<dd>山田太郎</dd>
<dt>性別</dt>
<dd>男性</dd>

<div>
  <dt>名前</dt>
  <dt>性別</dt>
</div>
<dd>山田太郎</dd>
<dd>男性</dd>
```

行動規範の内容に同意します

回答4件

ベストアンサー

The W3C Markup Validation Serviceでチェックするとわかりますが、HTML5としては間違っています。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>名前と性別</title>
6</head>
7<body>
8<dl>
9  <div>
10    <dt>名前</dt>
11    <dt>性別</dt>
12  </div>
13  <dd>山田太郎</dd>
14  <dd>男性</dd>
15</dl>
16</body>
17</html>

Validationの結果

Error: Element div is missing a required instance of child element dd.

From line 12, column 3; to line 12, column 8
性別</dt>↩ </div>↩ <dd
Content model for element div:
If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.
If the element is not a child of a dl element: Flow content.

Error: Element dd not allowed as child of element dl in this context. (Suppressing further errors from this subtree.)

From line 13, column 3; to line 13, column 6

</div>↩ <dd>山田太郎</ Contexts in which element dd may be used: After dt or dd elements inside dl elements. Content model for element dl: Either:Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. Or: One or more div elements, optionally intermixed with script-supporting elements.

Error: Element dd not allowed as child of element dl in this context. (Suppressing further errors from this subtree.)

From line 14, column 3; to line 14, column 6
太郎</dd>↩ <dd>男性</dd
Contexts in which element dd may be used:
After dt or dd elements inside dl elements.
Content model for element dl:
Either:Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.
Or: One or more div elements, optionally intermixed with script-supporting elements.

dt要素は

dl要素の内部でddまたはdt要素の前。
dl要素の子であるdiv要素内のddまたはdt要素の前。

にしか置けず、dd要素は

dl要素の内側でdtまたはddの後。
dl要素の子であるdiv要素内のddまたはdt要素の後。

としか置けません。(それぞれリンク先のHTML仕様書を参考にしてください。)

そのため、正しい解釈をするにはHTML5で構文エラーが含まれる場合の処理に関する仕様(かなり複雑)を確認する必要があり、回答するにはちょっと難しいです。

正しいHTML5にするのであれば、

HTML
1<dl>
2  <div>
3    <dt>名前</dt>
4    <dt>性別</dt>
5    <dd>山田太郎</dd>
6    <dd>男性</dd>
7  </div>
8</dl>

のように、dtとddを一緒にdivで囲む必要があります。

さて、上のように修正した場合どう解釈されるかですが、

名前が「名前」かつ「性別」
値が「山田太郎」かつ「男性」

となります。つまり**「『名前』は『山田太郎』です」かつ「『性別』は『山田太郎』です」かつ「『名前』は『男性』です」かつ「『性別』は『男性』です」と言っている**ことになります。(dl要素の三番目の例も参考にしてください。)

たぶん、やりたいことは、普通に定義リストを使っても下記のようなレイアウトにしたいと言うことでことでしょうか？

名前	性別
山田太郎	男性

もし、そうであれば、divで囲ってfloatすれば可能です。

HTML
1<dl>
2  <div>
3    <dt>名前</dt>
4    <dd>山田太郎</dd>
5  </div>
6  <div>
7    <dt>性別</dt>
8    <dd>男性</dd>
9  </div>
10</dl>

CSS
1dl {
2  overflow: hidden;
3}
4dl div {
5  float: left;
6  border: 2px solid #ddd;
7  margin-right: -2px;
8  border-collapse: collapse;
9}
10dl div dt {
11  border-bottom: 1px solid #ddd;
12  padding: .5em;
13  background: #f5f5f5;
14  font-weight: bold;
15}
16dl div dd {
17  padding: .5em;
18  margin-left: 0;
19}

CodePenでの実行例
※ Chromeで確認しています。CSSはブラウザ毎に微調整が必要かも知れません。

【注意】上記はHTML5についてのみ述べています。それより前のバージョンのHTMLを使用している場合は、解釈が異なる可能性がありますので、参考にしないでください。

投稿2017/09/14 12:59

編集2017/09/14 13:10

raccy

総合スコア21751

退会済みユーザー

2017/09/14 15:36 編集

性別________男性都道府県____東京都 _はスペース keyにあたる文字列の長さが異なる場合に、その横のvalueにあたる文字列の左端の位置を揃えたいのです。

raccy

2017/09/14 15:47

単に横並びにしたいだけですか？それなら「dl table」でググればいくらでも例が出てきます。 https://www.google.co.jp/search?q=dl+table 正統派は"display: table"等を使う方法っぽいですが、古いブラウザではどうなるかはちょっとわからないです。

退会済みユーザー

2017/09/14 15:53

display tableで対応してみたいと思います。ありがとうございました！

退会済みユーザー

2017/09/15 02:00 編集

> dl要素の三番目の例も参考にしてください。 At the end of the example, one group has two metadata labels ("Authors" and "Editors") and two values ("Robert Rothman" and "Daniel Jackson"). <dl> <dt> Last modified time </dt> <dd> 2004-12-23T23:33Z </dd> <dt> Recommended update interval </dt> <dd> 60s </dd> <dt> Authors </dt> <dt> Editors </dt> <dd> Robert Rothman </dd> <dd> Daniel Jackson </dd> </dl>

退会済みユーザー

2017/09/15 02:03

> dl要素の三番目の例も参考にしてください。これは上記のW3C公式の例と説明のことだと思うのですが、私にはこの説明からは、 "「『名前』は『山田太郎』です」かつ「『性別』は『山田太郎』です」かつ「『名前』は『男性』です」かつ「『性別』は『男性』です」と言っていることになります。" のように解釈することが正しいと読み取ることが出来ませんでした。そのように説明を読み取ることも可能ですし、また、別の読み取り方も可能なくらい、W3Cの説明が具体性に欠けているため。

raccy

2017/09/15 10:05 編集

dlは複数の「名前-値グループ」を構成します。注意して欲しいのは、一つの「名前-値グループ」について、「名前」は1個以上のリスト(つまり「名前のリスト」)、「値」も1個以上のリスト(つまり「値のリスト」)ということです。「『名前』『性別』」というリストで一つの「名前のリスト」をつくり、「『山田太郎』『男性』」というリストで一つの「値のリスト」を作っています。そして「名前のリスト」→「値のリスト」という関連付けです。そのリスト内部のそれぞれについて対応が関連付けられるわけではありません。そのため、解釈するのであれば、それぞれのリストを分割不可能なひとまとまりと捉えるか、リストの中は別の言い方(エイリアス、別名、もう一つの意味、他の説明など)と捉えるかのどちらかになります。なお、「各リスト内での順序は意味があっても良い」としていますが、それぞれのリスト内部で独立して意味があるという話だと思われます。「名前のリスト」の順序と「値のリスト」の順序が関連づけられるという解釈には無理があると思います。

行動規範の内容に同意します

<dl>定義

description list
→ 情報リスト、説明リスト（←いい翻訳が見つかりませんがおよそこんなかんじ）

<dt>定義

term/name in a description list
→ 用語/名前、項目名的な意味（説明リストの中）

※補足
dtに質問、ddに回答1・ddに回答2でも「質問：回答1、回答2」という関係が成り立っているので、termとして合っています。

<dd>定義

describe a term/name in a description list
→ 用語/名前(dt)の説明（説明リストの中）

参考

日本語のHTML5の非公式ドキュメント
http://html5.jp/tag/elements/dl.html
http://html5.cyberlab.info/elements/grouping/dl.html

英語のHTML5の非公式ドキュメント

https://www.w3schools.com/tags/tag_dl.asp

dtは単純にラベルとしての意味を持ち、dtが複数ある場合はグループ化されるようです。ddは前述のdtまたは、グループ化されたdtの記述説明であるということのようです。
https://www.w3.org/TR/html5/grouping-content.html#the-dl-element

※上記W3Cより

At the end of the example, one group has two metadata labels ("Authors" and "Editors") and two values ("Robert Rothman" and "Daniel Jackson").

<dl>

<dt> Last modified time </dt> <dd> 2004-12-23T23:33Z </dd> <dt> Recommended update interval </dt> <dd> 60s </dd> <dt> Authors </dt> <dt> Editors </dt> <dd> Robert Rothman </dd> <dd> Daniel Jackson </dd> </dl>

よって、下記のHTMLは定義から解釈した意味は下記のようになります。

(項目名：) 名前、性別
(名前、性別：) 山田太郎、男性

html
1<dl>
2  <dt>名前</dt>
3  <dt>性別</dt>
4  <dd>山田太郎</dd>
5  <dd>男性</dd>
6</dl>

個人的には、HTML的な意味が違うので正しく書いたほうがいろいろな面で良いと思いますが、今回のケースのような場合はそんなにシビアにならないほうがよいと思います。

SEO内部対策という観点からであれば、HTML定義的に正しく書くなるようにHTMLを作る努力したほうが良いと思います。

投稿2017/09/14 12:21

編集2017/09/14 16:18

Tomak

総合スコア1652

退会済みユーザー

2017/09/14 15:33

(項目名：) 名前 (項目名：) 性別：山田太郎、男性 ↑ このような解釈にはならないはずです。w3c公式ドキュメントの例で、dt, dt, dd, ddという順番のものがあるので。

Tomak

2017/09/14 15:55

すみません、dt ddの意味を少し勘違いしていました。おっしゃる通りw3cのドキュメントに意味がきちんと書いてありました。ありがとうございます。（回答を修正しておきます）

Tomak

2017/09/14 15:57

ん？コメントいただいたのは質問者のかたですね。この意味をわっかっているということは、質問は解決されたということでしょうか？

退会済みユーザー

2017/09/14 21:01

意味はもともと分かってます。質問はdtとddが質問文内のコードのようにそれぞれ連続した場合に、１つ目のdtは１つ目のddに対応し、２つ目のdtは2つ目のddに対応したものとして認識されるか否かとなります。

行動規範の内容に同意します

一応やると分かるのですが、スタイルが違うだけです。情報としては区別されますが、基本的にdlの中の複数のdtは同じようなことについて定義されることが多いです。
なので個人情報のような表示に定義リストを使うのは間違ってるようにも感じます。
また、もし使うのであれば親となるdl要素が必要です。

http://blog.nest-online.jp/14194
上記のようなサイトが参考になりそうです

投稿2017/09/14 09:38

編集2017/09/14 09:46

fagai

総合スコア2158

退会済みユーザー

2017/09/14 09:47

ご回答ありがとうございます。スタイルはCSS側で設定してしまうので、タグのデフォルトのスタイルがどうこうというのは今回のケースにおいて重要ではありません。また、親要素にdl要素が必要なのは認識しておりますが、質問文の中では省略しております。質問はdtとddが質問文内のコードのようにそれぞれ連続した場合に、１つ目のdtは１つ目のddに対応し、２つ目のdtは2つ目のddに対応したものとして認識されるか否かとなります。

fagai

2017/09/14 09:50

なるほど。であればこちらの回答はスルーしちゃってください。

退会済みユーザー

2017/09/14 10:24

dlは定義リストという訳ではないです。確かHTML5からdlの用途が広がったのではなかったでしたっけ。少なくともHTML5では、dlはあらゆるkey valueの関係を持つものに対して使えます。ソースはw3c。The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name. Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

fagai

2017/09/14 10:25

確かにdescription listに変わっていますね。見落としてました。

行動規範の内容に同意します

直前のdtに対応した二つのddと解釈されるでしょう。
ddが複数ある例はよくありますが、dtが連続する例も仕様書にあります(言語違い)。
https://www.w3.org/TR/html/grouping-content.html#the-dt-element

HTML
1<dl>
2  <dt lang="en-us"><dfn>Color</dfn></dt>
3  <dt lang="en-gb"><dfn>Colour</dfn></dt>
4  <dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.</dd>
5</dl>

投稿2017/09/14 09:33