プロが教えるわが家の防犯対策術!

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

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

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

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

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

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

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

以上です。

A 回答 (3件)

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

すべて書かれています。

 定義リスト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-html4 … )』
(原文)
 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 … )』

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

 そして、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>
・・・・・・と8行→5行と単純になりますし、スタイルシートも簡単になります。実例は
「テーブルタグを使ってフォームを作成してるのですが… - Webデザイン・CSS - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7314941.html#a4 )」に書きました。
    • good
    • 1
この回答へのお礼

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

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

お礼日時:2012/03/25 14:42

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


いいえ、違います。
dl,dt,ddは「定義リスト」といって、デザインの為では無く、
用語を説明する為に、dl,dt,ddを利用します。

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

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

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

文章構造やマークアップを無視するならば、お好きなようにとしか言えません・・・
    • good
    • 0
この回答へのお礼

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

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

参考になりました。

お礼日時:2012/03/25 14:40

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



dl/dt/dd は「語句の説明」をするための要素. dt が「説明される語句」, dd が「語句の説明」を意味し, それら全体をまとめるのが dl.
    • good
    • 0
この回答へのお礼

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

お礼日時:2012/03/25 14:43

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!