テーブルのための HTML dl、dt、dd マークアップ vs テーブル

Webサイトの開発・保守のコストを削減できるだけでなく、コードもよりセマンティックになります。しかし、テーブルがなくなったわけではなく、個人情報のデータ一覧など、Webページでのデータ表現に必要なものとして、今でも多くの人に使われている。実際、HTMLのdl、dt、ddタグを使うことで、よりコードを節約でき、よりセマンティックにすることができます。もちろん、非常に大きなデータ表であるtableの場所もありますが、小さなデータリストやフォームであれば、tableを全く使わずに使うことができます

もしあなたがまだ伝統的なテーブルを使ってデータのリストを作っているなら、HTMLのdl、dt、ddタグを使うことでどのように作業が楽になるかを見てみましょう...。

テーブルデータ一覧

従来のテーブルデータリストのコードは以下の通りです。各行にtrタグを追加し、次にタイトル用のtdタグとデータ用のtdタグを追加し、タグはすべてtdなので、スタイルを追加したい場合は各tdにclass属性を追加したいと思います。

以下は、対応する CSS のコードでは、HTMLであらかじめ宣言されたクラスにスタイルを追加しています。

上記のコードからわかるように、tableタグを使って、CSSで内容を変更したり修正したりする場合は、tdセルに対応するclass属性をいくつか追加する必要があります。これは必ず、作業量を増やし、コードを少しずつ増やしていくことになります。コードが増えるとはどういうことでしょうか？それは、トラフィックが無駄になり、バグが増え、メンテナンスが難しくなることを意味します。

dl, dt, ddデータ一覧

では、HTMLのdl, dt, ddタグを使って、データリストを見てみましょう。まず、dl（定義リスト - カスタムリスト）タグでデータ構造全体を保持し、dt（カスタムタイトル）タグとdd（カスタムディスクリプション）タグで、データのタイトルと内容を保持します。

そして、cssのコードでは、dtとddを左にフロートさせるだけです。
/*dl, dt, dd タグリストデータ*/

dl、dt、ddの例を見れば、そのコードがよりクリーンでスムーズで、よりセマンティックであることは一目瞭然でしょう。

もし、あなたがまだウェブフォームやその他のページレイアウトにテーブルタグを使用しているなら、今こそコードを変更する時です。あなたの仕事を少し楽にしましょう