【dl, table, ul,ol】使い分けを理解する!!

こんにちは！突然ですがあなたはdlタグ、tableタグ、ul,olタグの違いを説明できますか？

明確な違いを理解して使わなければ、SEO対策がとても不利になってしまいます。

SEO対策についての記事はこちら↓

また、これらのタグはGoogleなどの検索エンジンにサイトの構造を理解させるために、表やリストが登場するサイトでは必要不可欠です。

筆者がSEO対策を練る際に得た様々な知識を本記事にまとめさせていただきました。

どのタグも見たことがない！なんて方にもわかりやすく紹介していきますね！

1. 1.最初にオススメすること
2. 2.dlタグ
3. 3.tableタグ
4. 4.ulタグ、olタグ
5. 5.まとめ

最初にオススメすること

まず、dlタグの中では項目によって<dt>や<dd>を使い分けます。

最初はdtとddどっちがどっちで、どういう意味なんだっけ？って混同しますよね。

これは略している英語の意味を覚えるのが一番わかりやすいです。

そちらも項目ごとに合わせてご説明いたします。

dlタグ

dl = definition list（定義）の略であり、定義リスト(説明リスト)のことを指します。

dlタグの中で使えるタグは、<dt>と<dd>の二つです。

dt:定義する用語（Definition Term）

dd:用語の説明（Definition Description）

使用例

定期公演について
　　開催日時：8/12 10:00～
　　開催場所：日比谷野外音楽堂

↓

<table>
  <caption>定期公演について</caption>
<dl>
  <dt>開催日時：</dt>
  <dd>8/12 10:00〜</dd>

  <dt>開催場所：</dt>
  <dd>日比谷野外音楽堂</dd>
</dl>
</table>

dtとddを横並びにしたいときは、floatなどを活用しましょう。

また、使用例のように<dt>の後に毎回：(コロン)などの一定の文字が来る場合は、dt::afterといった擬似要素でコーディングする方がスタイリッシュなコーディングになりますね！

tableタグ

tableタグの中では、<tr>/<th>/<td>を用います。

tr:テーブルの列（Table Row）

th:テーブルの見出し（Table Header）

td:テーブルのデータ（Table Data）

使用例

定期公演について

↓

<table>
  <caption>定期公演について</caption>
  <tr>
    <th>開催日時</th>
    <td>8/12 10:00〜</td>
  </tr>

  <tr>
    <th>開催場所</th>
    <td>日比谷野外音楽堂</td>
  </tr>
</table>

使い方としては、<table>の中に<tr>、<tr>の中に<th>と<td>を適宜追加していくような形です。

thやtdの個数には特にルールはありません。

また、<caption>は<table>のすぐ下に一つだけ挿入できるタグです。

tableの題名があてられるときは積極的に使いましょう。

ulタグ、olタグ

ol:順序つきリスト（Ordered list）

ul:順序なしリスト（Unordered list）

使用例

カレーの具材の種類
　・人参
　・じゃがいも
　・お肉

カレーの作り方
　1.肉と野菜を炒める
　2.カレールーを入れる
　3.とろみがつくまで弱火で煮込む

↓

<caption>カレーの具材の種類</caption>
<ul>
  <li>人参</li>
  <li>じゃがいも</li>
  <li>お肉</li>
</ul>
<caption>カレーの作り方</caption>
<ol>
  <li>肉と野菜を炒める</li>
  <li>カレールーを入れる</li>
  <li>とろみがつくまで弱火で煮込む</li>
</ol>

順序が関係ないものには<ul>、関係あるものには<ol>を用います。

本サイトの目次は<ol>で構成されています。

デフォルトの状態だと、<ul>にはlist-style-type:disc（黒点）,<ol>にはlist-style-type:decimal（半角英数字）というCSSがついております。

そのまま用いても構いませんが、黒点や数字の分の幅は考慮されずに出力されるので、CSSで調整をしましょう。

list-style-typeには色々な種類があるので、好みのものを用いてください。

まとめ

いかがでしたか？

ぜひタグを正しく使ってSEO対策をして、検索上位に出るようなサイトを作ってください。