【ul,ol,dl,table】SEOに基づいたHTMLタグの選び方

コーダーのみなさん、こんにちは。

みなさんはコーディングするとき、

「これってどのタグを使うのがいいんだろう…」

と悩むことはありませんか？

どんなに経験豊富な方でも、皆無ということはありませんよね。

これに関しては、SEOへの知見をある程度もつことで迷うことは格段に減るかと思います。

そこで、今回の記事では迷うことが多いのではないかと思われる似たようなタグについてご説明します。

1.ul,olタグ

まず利用する機会が多いこのリストタグです。

この2つのタグの違いが明確にわかりますか？

答えは、タグの正式名称から考えればわかりやすいです。

ol：順序つきリスト（Ordered list）
ul：順序なしリスト（Unordered list）

つまり、

リストの順番に規則性があればol、

規則性がなければulを用いると考えれば大丈夫です。

2.dlタグ

dlタグの中ではdt,ddというタグを用います。

これらのタグの意味をまとめて書いてみます。

dl：定義リスト(Definition List)
dt：定義する用語（Definition Term）
dd：用語の説明（Definition Description）

日本語の意味を見ると大体わかっていただけるかもしれませんが、少しわかりづらいのでコードでも例を示します。

<p>歓迎会について</p>
<dl>
 <dt>予算：</dt>
 <dd>4000円</dd>
 <dt>人数</dt>
 <dd>15人</dd>
 <dt>時間</dt>
 <dd>19:00〜</dd>
</dd>

dtとddの間には統一した文字（：や／）を入れることが多いですが、CSSの擬似要素などで実装するとスマートかつSEO的に余分な文字が入っていないことになるので、推奨されています。

3.tableタグ

こちらは表を作りたい時に使われるものなので一番わかりやすいですが、先にコードを例として表記します。

<table>
 <caption>歓迎会について</caption>
 <tr>
  <th>予算</th>
  <td>4000円</td>
 </tr>
 <tr>
  <th>人数</th>
  <td>15人</td>
 </tr>
 <tr>
  <th>時間</th>
  <td>19:00〜</td>
 </tr>
</table>

tr：テーブルの列（Table Row）
th：テーブルの見出し（Table Header）
td：テーブルのデータ（Table Data）

tableタグの中に、列として加えたい項目を<tr>の中に、見出し要素として加えたいものを<th>、その説明として加えたいものを<td>と加えていきます。

また、<caption>は<table>の開始タグのすぐ下に一つだけtableの題名のような立ち位置で使用できます。

レイアウトはCSSで組んであげると、Webサイトで簡単に表が再現できます。

いかがだったでしょうか。

タグの意味をきちんと理解して、検索上位に入るようなサイト作りに活かしてみてください！