DLタグ と TABLEタグ

質問

dl・dt・ddタグは、本来1行ほどずれて表示されるタグだと思うのですが、

tableタグのように1行に並べて表示できることを知りました。 (TRやTDのように)

例)
ユーザー名：テキストボックス
パスワード ：テキストボックス
⇒tableでもDL一式でも可能だと思っております。

ただ、DLとかDTタグを横に並べて使用するぐらいなら
tableタグでやったほうが早いと思ってしまうのです。

たぶん何かメリットがあると思うのですが
そのメリットがわかりません。

tableタグ一式で、横並びの表を作成するより
DLタグ一式でやったほうがいいメリットを
教えて頂けないでしょうか。

ご教授よろしくお願いします。

以上です。

回答No.2

ORUKA1951 · ベストアンサー

疑問に感じたら仕様書を読んでみると良いです。すべて書かれています。

　定義リストdlは、HTML4.01では用語(dt)とその記述(dd)をマークアップするためのものと誤解されている方がいますが、仕様書にはどこにもそう書かれていません。
「用語はDT要素から与えられ、インラインの内容に制限されます。その記述は、ブロック・レベル内容を含んでいるDD要素で与えられます。」
「The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.」

　仕様書でも会話に使う使い方が実例として挙げられていました。
『DL要素の応用として、例えば対話のマーク付けがある。 DT要素が話者を示し、DD要素が話の内容を示す、というものである。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#h-10.3 )』
(原文)
　Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

したがって
ユーザー名：テキストボックス
パスワード ：テキストボックス
などの使い方も誤りではありません。

　HTML5では定義以外に使われるように明記され、一方で会話に使うことは否定されます。
『The dl element is inappropriate for marking up dialogue. Examples of how to mark up dialogue are shown below. ( http://www.w3.org/TR/html5/grouping-content.html#the-dl-element )』

　さて、実際のデザインですが、tableでのマークアップには多くの問題を抱えているのはご存知のとおりです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より

　そして、tableでのマークアップは煩雑になります。たとえば、
ユーザー名：テキストボックス
パスワード ：テキストボックス
は、仕様書に従い厳密にマークアップすると最低限
<table summary="form">
　<tbody>
　　<tr>
　　　<th abbr="名前">名前</th><td><input ・・・略・・・></td>
　　</tr>
　　<tr>
　　　<th abbr="パスワード">パスワード</th><td><input ・・・略・・・></td>
　　</tr>
・・・・・ですが、dlでマークアップすると
<dl class="form">
　<dt>名前</dt>
　<dd><input ・・略・・</dd>
　<dt>パスワード</dt>
　<dd><input ・・略・・</dd>
・・・・・・と８行→５行と単純になりますし、スタイルシートも簡単になります。実例は
「テーブルタグを使ってフォームを作成してるのですが… - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7314941.html#a4 )」に書きました。

お礼

>定義リストdlは、HTML4.01では用語(dt)とその記述(dd)をマークアップするためのものと誤解されている方がいますが、仕様書にはどこにもそう書かれていません。

私がその通りでした。
また、参考リンクもつけていただき、ありがとうございます。

回答No.3

naokita

＞dl・dt・ddタグは、本来1行ほどずれて表示されるタグだと思うのですが、
いいえ、違います。
dl,dt,ddは「定義リスト」といって、デザインの為では無く、
用語を説明する為に、dl,dt,ddを利用します。

tableは、「表」なので、
エクセルで作ったようなデータなどを表示するためのHTMLです。

つまり、マークアップの違いなので、
そのコンテンツによって使い分けるのが正解です。
質問者さんが、HTMLの利用に関して間違った解釈をしています・・・
HTMLで文章構造をつくり、
CSSでデザインする。
CSSでどちらも同じデザインに出来ます。

＞tableタグでやったほうが早いと思ってしまうのです。
それは個人の違いですが、
手書きで複雑なテーブルのセルを変更するのは面倒ですよ・・・

文章構造やマークアップを無視するならば、お好きなようにとしか言えません・・・

お礼

>つまり、マークアップの違いなので、
そのコンテンツによって使い分けるのが正解です。
質問者さんが、HTMLの利用に関して間違った解釈をしています・・・
HTMLで文章構造をつくり、
CSSでデザインする。
CSSでどちらも同じデザインに出来ます。

情報ありがとうございます。
やはりマークアップは心がけないとだめですね。

参考になりました。

回答No.1

Tacosan

1行目から間違っとる....

dl/dt/dd は「語句の説明」をするための要素. dt が「説明される語句」, dd が「語句の説明」を意味し, それら全体をまとめるのが dl.

お礼

情報ありがとうございます。
参考にさせていただきます。