セマンティックコーディングとは、HTML のタグを「見た目」ではなく「意味」で選んで書くことです。見出しなら h1〜h6、箇条書きなら ul、本文の区切りなら section というように、その中身が何であるかに合わせてタグを決めます。

div と span だけでも、CSS を当てれば同じ見た目は作れます。それでもタグを選ぶのは、HTML が人間だけでなく、検索エンジンや読み上げソフトにも読まれるものだからです。

なぜタグを選ぶのか

1. 検索エンジンが構造を読み取る

検索エンジンは、見出しの階層からページの構造を組み立てます。h2 の下に h3 が並んでいれば「大きな話題の中に小さな話題がある」と読めますが、すべてが div にサイズ違いの CSS を当てただけだと、どこが見出しなのかが分かりません。

2. 読み上げソフトが移動の手がかりにする

スクリーンリーダーの利用者は、見出しやランドマーク（header・nav・main・footer）を頼りにページ内を移動します。ここが div のままだと、上から順に全部を読み上げるしかなくなります。

3. あとから触る人が読める

半年後に別の人が修正するとき、nav の中を直せばナビだと分かります。class 名だけが頼りの状態だと、まず HTML を上から読み解くところから始めることになります。

よく使うタグと、使いどころ

• header … ページやセクションの先頭。ロゴやサイト内の案内
• nav … サイト内の主要なリンクのまとまり。パンくずもここ
• main … そのページの主役になる内容。1 ページに 1 つ
• article … それ単体で意味が通るまとまり。記事や製品カードなど
• section … 見出しを持つ話題の区切り。見出しが無いなら div でよい
• aside … 本筋から外れる補足。関連記事やサイドの案内
• footer … ページやセクションの末尾。著作権表示や規約へのリンク

section は「見出しを持つ区切り」です。見出しが無いのに section で囲むと、かえって構造が読み取りにくくなります。ただの箱なら div のままで構いません。

div ばかりになっていないか

実務でよく見るのは、次のような HTML です。見た目は問題なく作れますが、構造の情報は何も残っていません。

<div class="ttl-lg">サービス一覧</div>
<div class="list">
  <div class="item">コーディング代行</div>
  <div class="item">WordPress制作</div>
</div>

同じ見た目のまま、タグだけを意味に合わせるとこうなります。CSS は class に当てているので、書き換えても崩れません。

<h2 class="ttl-lg">サービス一覧</h2>
<ul class="list">
  <li class="item">コーディング代行</li>
  <li class="item">WordPress制作</li>
</ul>

見出しの階層を飛ばさない

「h2 だと文字が大きすぎるから h4 にする」という選び方をすると、階層が飛んで構造が壊れます。大きさは CSS で決めるものなので、タグは中身の階層で選び、見た目はあとから合わせます。

1. h1 はそのページが何のページかを表す。1 ページに 1 つ
2. h2 は h1 の中の大きな話題。h3 は h2 の中の小さな話題
3. 飛ばさない（h2 の次にいきなり h4 を置かない）

どこまでやるか

すべてのタグを厳密に選び分けようとすると、判断に時間がかかり、かえって粗が出ます。実務では次の順で押さえておけば、ほとんどの効果は得られます。

1. 見出しを h1〜h6 で正しく組む（ここがいちばん効きます）
2. 箇条書きは ul / ol、定義や項目と値は dl
3. header・nav・main・footer でページの骨格を示す
4. 画像と説明文の組は figure / figcaption
5. 表は table。レイアウト目的では使わない

当社のコーディング代行では、デザインデータからこの形に起こしたうえで納品しています。既にあるHTMLの見直しだけのご依頼にも対応しています。