【HTML】dl・table はどう使い分ける？使用例を含めて解説

今回はHTMLでマークアップする際に少しややこしい dl・table について深掘りしていきます。

実際にコーディングしている時、「これはどっちのタグを使えばいいんだっけ？」となる場面がある人は多いのではないでしょうか。

HTMLの構造をしっかりと組み立てられるように、実際の使用例を見ながら理解を深めていきましょう。

dl(dt,dd)・table はどんな意味がある？
- dl
- table
使用例
まとめ

dl(dt,dd)・table はどんな意味がある？

まずは dl(dt,dd)・table 各タグの持つ意味と、それに付随するタグを理解しましょう。

dl

The dl element represents an association list consisting of zero or more name-value groups (a description list).
4.5.8 dl 要素 — HTML5: Edition for Web Authors

翻訳すると「0 個以上の名前と値のグループで構成される連想リスト (説明リスト) を表す」となり、「連想リスト (説明リスト) 」だということがわかります。

dlタグに関連して使用されるタグはこちらです。

<dl> – description list
<dt> – description term
<dd> – difinition, description

dlタグの中には必ず、dtタグを1つ以上、ddタグを1つ以上含めて使用します。

また、一つのdl要素の中に、各名称に対して複数のdt要素を存在させてはならないというルールがあります。

以上のことから、dlタグは「連想リスト (説明リスト)」として使用し、使用方法覚えて適切に使用する必要があることがわかります。

実際に使用する例として、会社概要やお問い合わせフォーム、よくある質問などが挙げられます。

table

The table element represents data with more than one dimension, in the form of a table.

Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table’s cells must completely cover that grid without overlap.
4.9.1 The table element — HTML5: Edition for Web Authors

翻訳すると、

「table要素は複数の次元を持つデータを表の形で表します。表にはその子孫によって指定された行、列、およびセルがあります。行と列はグリッドを形成します。テーブルのセルは、重なり合うことなくそのグリッドを完全にカバーする必要があります。」となります。

このことから、tableタグは情報をわかりやすく説明するため、表にする際に使用するタグということがわかります。

tableタグに関連して使用されるタグはこちらです。

<table>
<tr> – table row
<td> – table data cell
<th> – table header cell
<thead> – table header
<tbody> – table body
<tfooter> – table footer

上記のタグを使用して表のレイアウトを作成することができます。

trタグは行、tdタグは表にあるマス毎の値、thタグは表の見出しの項目、theadタグ・tbodyタグ・tfooterタグは表のセクションを分ける際に使用します。

詳しいタグの使い方は後ほど使用例のコードで確認しましょう。

使用例

それでは実際に、使用例からどのタグを使用するとより良いのかを考えていきましょう。

お問い合わせフォーム

お問い合わせフォームをマークアップする時にどのタグを使用するのが良いのでしょうか。

まずは例を考えましょう。

例えば、名前を入力する項目があるとします。その一つの項目には、名前と名前を入力する項目がありますよね。

この場合、一つの項目に対して項目名と説明があるということになるので、dlタグを使用するのが適切だと考えられます。

実際にコードを書くと下のコードになります。

<form action="index.php" method="post">
  <dl>
    <dt><label for="your_name">お名前</label></dt>
    <dd><input type="text" id="your_name" name="your_name"></dd>
    <dt><label for="your_mail">メールアドレス</label></dt>
    <dd><input type="email" id="your_mail" name="your_mail"></dd>
    <dt><label for="message">ご質問・お問合せ内容</label></dt>
    <dd><textarea id="message" name="message" cols="46" rows="10"></textarea></dd>
  </dl>
  <p><input type="submit" value="送信する"></p>
</form>

特徴比較

特徴を比較するときはどのタグがいいでしょうか？

文字ばかりだと少し理解に時間がかかるかもしれません。

その場合はtableタグを使用しましょう。

tableタグに関連するタグを使用してマークアップしたものがしたのコードです。

<table border="1">
  <thead>
    <tr>
      <th>項目</th>
      <th>文字を書く</th>
      <th>紙を切る</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>えんぴつ</td>
      <td>○</td>
      <td>×</td>
    </tr>
    <tr>
      <td>はさみ</td>
      <td>×</td>
      <td>○</td>
    </tr>
  </tbody>
</table>

このコードをフロントで確認したら下のようになります。

tableタグはCSSを使用しなくても、ある程度表になるようになっています。

さらに関連タグを適切に使用すれば、印刷機器がその構造を理解して適切に印刷してくれたりします。

適切なマークアップでより良いパフォーマンスになるなら、意識してマークアップしたいですね。

よくある質問

よくある質問はどうマークアップすると良いのでしょうか。

tableタグ、ulタグ、divタグ等でもマークアップできると思いますが、dlタグを使用するのがベストだと思います。

理由は、dlタグが説明リストだからです。

よくある質問は質問に対して説明をするということになるので、dlタグの用途に合っています。

<dl>
  <dt>返品はできますか？</dt>
  <dd>購入から１４日以内、未使用の場合は返品可能です。</dd>
  <dt>送料はいくらかかりますか？</dt>
  <dd>地域によって異なります。添付の画像ファイルでご確認をお願いします</dd>
  <dt>保証内容を教えてください</dt>
  <dd>購入から１年間の保証がついています。詳しい内容はこちらのページをご覧ください</dd>
</dl>