質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

6384閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/09/14 09:23

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

<dt>が2連続して、<dd>が2連続した場合、 1つ目のdtが1つ目のddに対応し、2つ目のdtが2つ目のddに対応したものとして、 マークアップ的に解釈されるのでしょうか?
<dt>名前</dt> <dd>山田太郎</dd> <dt>性別</dt> <dd>男性</dd>
<div> <dt>名前</dt> <dt>性別</dt> </div> <dd>山田太郎</dd> <dd>男性</dd> ```

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

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>

のように、dtddを一緒に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

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

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

0

<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が質問文内のコードのようにそれぞれ連続した場合に、1つ目のdtは1つ目のddに対応し、2つ目のdtは2つ目のddに対応したものとして認識されるか否かとなります。
guest

0

一応やると分かるのですが、スタイルが違うだけです。情報としては区別されますが、基本的に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が質問文内のコードのようにそれぞれ連続した場合に、1つ目のdtは1つ目のddに対応し、2つ目の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に変わっていますね。見落としてました。
guest

0

直前の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

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/09/14 09:35

> 直前のdtに対応した二つのddと解釈されるでしょう。 つまり、名前→山田太郎、性別→男性、という対応関係があると解釈されるということでしょうか? ちなみに、その根拠となるソースはありますでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問