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

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

ただいまの
回答率

90.36%

  • HTML

    10259questions

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

  • CSS

    6681questions

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

  • HTML5

    4600questions

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

  • CSS3

    2352questions

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

  • Webサイト

    1186questions

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

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

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 1,599
退会済みユーザー

退会済みユーザー

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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+4

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>名前と性別</title>
</head>
<body>
<dl>
  <div>
    <dt>名前</dt>
    <dt>性別</dt>
  </div>
  <dd>山田太郎</dd>
  <dd>男性</dd>
</dl>
</body>
</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にするのであれば、

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

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

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

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

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

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

名前 性別
山田太郎 男性

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

<dl>
  <div>
    <dt>名前</dt>
    <dd>山田太郎</dd>
  </div>
  <div>
    <dt>性別</dt>
    <dd>男性</dd>
  </div>
</dl>
dl {
  overflow: hidden;
}
dl div {
  float: left;
  border: 2px solid #ddd;
  margin-right: -2px;
  border-collapse: collapse;
}
dl div dt {
  border-bottom: 1px solid #ddd;
  padding: .5em;
  background: #f5f5f5;
  font-weight: bold;
}
dl div dd {
  padding: .5em;
  margin-left: 0;
}

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


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/15 00:28 編集

    性別________男性
    都道府県____東京都

    _はスペース

    keyにあたる文字列の長さが異なる場合に、その横のvalueにあたる文字列の左端の位置を揃えたいのです。

    キャンセル

  • 2017/09/15 00:47

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

    キャンセル

  • 2017/09/15 00:53

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

    キャンセル

  • 2017/09/15 10:57 編集

    > 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 11:03

    > dl要素の三番目の例も参考にしてください。

    これは上記のW3C公式の例と説明のことだと思うのですが、私にはこの説明からは、

    "「『名前』は『山田太郎』です」かつ「『性別』は『山田太郎』です」かつ「『名前』は『男性』です」かつ「『性別』は『男性』です」と言っていることになります。"

    のように解釈することが正しいと読み取ることが出来ませんでした。そのように説明を読み取ることも可能ですし、また、別の読み取り方も可能なくらい、W3Cの説明が具体性に欠けているため。

    キャンセル

  • 2017/09/15 19:04 編集

    dlは複数の「名前-値グループ」を構成します。注意して欲しいのは、一つの「名前-値グループ」について、「名前」は1個以上のリスト(つまり「名前のリスト」)、「値」も1個以上のリスト(つまり「値のリスト」)ということです。「『名前』『性別』」というリストで一つの「名前のリスト」をつくり、「『山田太郎』『男性』」というリストで一つの「値のリスト」を作っています。そして「名前のリスト」→「値のリスト」という関連付けです。そのリスト内部のそれぞれについて対応が関連付けられるわけではありません。

    そのため、解釈するのであれば、それぞれのリストを分割不可能なひとまとまりと捉えるか、リストの中は別の言い方(エイリアス、別名、もう一つの意味、他の説明など)と捉えるかのどちらかになります。

    なお、「各リスト内での順序は意味があっても良い」としていますが、それぞれのリスト内部で独立して意味があるという話だと思われます。「名前のリスト」の順序と「値のリスト」の順序が関連づけられるという解釈には無理があると思います。

    キャンセル

0

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

<dl>
  <dt lang="en-us"><dfn>Color</dfn></dt>
  <dt lang="en-gb"><dfn>Colour</dfn></dt>
  <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>
</dl>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/14 18:35

    > 直前のdtに対応した二つのddと解釈されるでしょう。

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

    キャンセル

0

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/14 18:47

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

    キャンセル

  • 2017/09/14 18:50

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

    キャンセル

  • 2017/09/14 19: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.

    キャンセル

  • 2017/09/14 19:25

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

    キャンセル

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は定義から解釈した意味は下記のようになります。

  • (項目名:) 名前、性別
  • (名前、性別:) 山田太郎、男性
<dl>
  <dt>名前</dt>
  <dt>性別</dt>
  <dd>山田太郎</dd>
  <dd>男性</dd>
</dl>

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/15 00:33

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

    このような解釈にはならないはずです。w3c公式ドキュメントの例で、dt, dt, dd, ddという順番のものがあるので。

    キャンセル

  • 2017/09/15 00:55

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

    キャンセル

  • 2017/09/15 00:57

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

    キャンセル

  • 2017/09/15 06:01

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

    キャンセル

同じタグがついた質問を見る

  • HTML

    10259questions

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

  • CSS

    6681questions

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

  • HTML5

    4600questions

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

  • CSS3

    2352questions

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

  • Webサイト

    1186questions

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