dl・dt・ddタグは、本来1行ほどずれて表示されるタグだと思うのですが、
tableタグのように1行に並べて表示できることを知りました。 (TRやTDのように)
例)
ユーザー名:テキストボックス
パスワード :テキストボックス
⇒tableでもDL一式でも可能だと思っております。
ただ、DLとかDTタグを横に並べて使用するぐらいなら
tableタグでやったほうが早いと思ってしまうのです。
たぶん何かメリットがあると思うのですが
そのメリットがわかりません。
tableタグ一式で、横並びの表を作成するより
DLタグ一式でやったほうがいいメリットを
教えて頂けないでしょうか。
ご教授よろしくお願いします。
以上です。
No.2ベストアンサー
- 回答日時:
疑問に感じたら仕様書を読んでみると良いです。
すべて書かれています。定義リスト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 )」に書きました。
>定義リストdlは、HTML4.01では用語(dt)とその記述(dd)をマークアップするためのものと誤解されている方がいますが、仕様書にはどこにもそう書かれていません。
私がその通りでした。
また、参考リンクもつけていただき、ありがとうございます。
No.3
- 回答日時:
>dl・dt・ddタグは、本来1行ほどずれて表示されるタグだと思うのですが、
いいえ、違います。
dl,dt,ddは「定義リスト」といって、デザインの為では無く、
用語を説明する為に、dl,dt,ddを利用します。
tableは、「表」なので、
エクセルで作ったようなデータなどを表示するためのHTMLです。
つまり、マークアップの違いなので、
そのコンテンツによって使い分けるのが正解です。
質問者さんが、HTMLの利用に関して間違った解釈をしています・・・
HTMLで文章構造をつくり、
CSSでデザインする。
CSSでどちらも同じデザインに出来ます。
>tableタグでやったほうが早いと思ってしまうのです。
それは個人の違いですが、
手書きで複雑なテーブルのセルを変更するのは面倒ですよ・・・
文章構造やマークアップを無視するならば、お好きなようにとしか言えません・・・
>つまり、マークアップの違いなので、
そのコンテンツによって使い分けるのが正解です。
質問者さんが、HTMLの利用に関して間違った解釈をしています・・・
HTMLで文章構造をつくり、
CSSでデザインする。
CSSでどちらも同じデザインに出来ます。
情報ありがとうございます。
やはりマークアップは心がけないとだめですね。
参考になりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- その他(プログラミング・Web制作) python 気象データの取得 2 2023/06/20 23:54
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- その他(学校・勉強) この中で間違ってある説明はありますか?詳しい方に教えていただきたいです。 A. 1つのプログラムが複 2 2023/07/14 01:15
- Instagram Instagramのタグ付けについて 1 2022/12/05 08:45
- Instagram どう思いますか? 以前、旦那が私と結婚した時の指輪や婚姻届が付いている写真をインスタにあげたんです。 2 2022/07/14 21:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
テーブルとテーブルの間隔について
-
CSSで特定のテーブルだけに...
-
@mediaprint
-
同じ幅指定のつもりなのに、ブ...
-
HTMLのテーブルをExcelにCopy&P...
-
HTML5で、テーブル内tdタグの高...
-
TR タグの表示・非表示を一括で...
-
tableの位置がIEとその他ブラウ...
-
親要素のwidthは子要素のwidth...
-
html5のテーブル内でdivのタブ...
-
tableのcellpadding="0" cellsp...
-
画面幅に合わせてテーブルのカ...
-
フォームタグのプルタウンの隙...
-
終了タグは省略可?
-
テーブル内のセル間にスペース...
-
CSS スタイルを子要素の子要素...
-
(HTML)Tableを任意の位置に置...
-
cssでテーブルで細い線
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
同じ幅指定のつもりなのに、ブ...
-
table表を横に並べる際の間隔指定
-
HTML tableのセルにtextareaを...
-
HTMLのテーブルをExcelにCopy&P...
-
テーブル内のセル間にスペース...
-
画面幅に合わせてテーブルのカ...
-
<fieldset>タグについて
-
tableの位置がIEとその他ブラウ...
-
textareaの外側の文字が下付き...
-
テーブル幅が固定できない
-
テーブルデータを折り返して表...
-
html5のテーブル内でdivのタブ...
-
VBAで作れるかな?
-
HTML フォントの指定
-
CSS スタイルを子要素の子要素...
おすすめ情報