これは何
Webを作っていると、よく「セマンティックにマークアップするのが良い」と耳にします。
今でこそこの意味と重要性を理解していますが、コーディングを始めた頃は「セマンティックとはなんなのか」「なぜ大事なのか」、いまいちピンときていませんでした。
そこで、コーディングを初めて頃の自分に伝えておきたいセマンティックのことをまとめてみました。
そもそも「セマンティックなマークアップ」とはなんなのか
HTMLのマークアップで使うh1~h6やpといった要素は、それぞれ「見出し」や「段落」をいった意味を持ち、こうした要素を「セマンティック要素」と呼びます。
（中には意味を持たない要素もありますが）
そして、この意味を適切にマークアップすることを「セマンティックなマークアップ」などと表現します。
（ここの表現の仕方は人によって異なり、「セマンティックマークアップ」や「適切なセマンティクスのマークアップ」などと表現することもあります。）
セマンティックなマークアップは、「アクセシビリティの向上」「コードの可読性の向上」「SEOの向上」などにつながり、Webを作る上でとても重要な概念です。
セマンティックでないマークアップとはなんなのか
では逆に、セマンティックでないマークアップとはどんなものがあるでしょうか。
すべてのコンテンツがdivやspanでマークアップされている
よく言われるのは、「すべてdivやspanで作られているサイト」です。
divやspanは、コンテンツを区分するためのタグで、それ自体は意味を持ちません。
つまりどれだけマークアップをしても意味を与えることができません。
例えば以下のようなマークアップです。
<div class="container">
<span class="title">
今日の予定
</span>
<div class="list">
<span class="list_item">朝：掃除</span>
<span class="list_item">昼：服を買いに行く</span>
<span class="list_item">夜：記事を書く</span>
</div>
</div>
一切の意味がない状態なので、セマンティクスによって得られるはずだった恩恵を得ることができません。
また、レビュー時や後からコードを見返したときに、コードから意味を読み取れないため読みづらいコードになります。
（規模の大きいページになるほど、強くこの重要性を感じます..）
セマンティクスは検索エンジンによる解析にも利用されるので、SEOへも影響します。
AIにとっての学習しやすさにも影響するようです。
先程のマークアップを適切なセマンティクスにすると、たとえば以下のようになります。
<section class="container">
<h2 class="title">
今日の予定
</h2>
<ol class="list">
<li class="list_item">掃除</li>
<li class="list_item">服を買いに行く</li>
<li class="list_item">記事を書く</li>
</ol>
</section>
まず、sectionによって情報のまとまりがどこからどこまでなのかわかるようになります。
また、要素が見出しやリストであることが支援技術でわかるようになります。
支援技術でサポートされていれば、見出しやリストをショートカットでナビゲートして読むセクションを決めるなどもできます。
使用しているタグのセマンティクスが適切でない
divやspan以外のタグでマークアップされていても、文書の持つ意味とタグの持つ意味が違ければ、適切でありません。
文字サイズを大きくするためにhを利用したり、ナビゲーションでないサイドバーにnavを使用したりするなどがあります。
先ほどと同様にセマンティクスによって得られるはずだった恩恵を得ることができません。
さらに、意味が間違っているので、コンテンツの利用の邪魔をしてしまいます。
例えば以下のようなマークアップです。
<small>【すごく美味しいラーメン店】</small>
<h2>早い、安い、美味い！</h2>
<p>おすすめメニュー</p>
<h3>味噌ラーメン</h3>
<h3>醤油ラーメン</h3>
<div onClick="openMenu()">メニュー一覧を開く</div>
文字サイズを小さくするために本来注釈的な要素に用いられるsmallを利用したり、逆に見出しでない要素の文字を大きくするためにhを使っています。
また、ボタンがdivで実装されているため、キーボードで操作することができません。
先程のマークアップを適切なセマンティクスにすると、たとえば以下のようになります。
<h1>【すごく美味しいラーメン店】</h1>
<p>早い、安い、美味い！</p>
<section>
<h2>おすすめメニュー</h2>
<p>味噌ラーメン</p>
<p>醤油ラーメン</p>
<button onClick="openMenu()">メニュー一覧を開く</button>
</section>
見出しのナビゲーションが使えるようになり、ボタンもキーボードで操作できるようになります。
フォントサイズや太字などの装飾的な見た目は、CSSで表現します。
まとめ「なぜセマンティックなマークアップが大切なのか」
アクセシビリティのため
様々な利用方法で、Webを利用しやすくなります。
スクリーンリーダーなどの支援技術で、意味を読み取ったりコンテンツのナビゲーションができるようになります。
また、ボタンのキーボード操作やフォームにフォーカスした時のラベルの読み上げなど、意味に応じて用意されている機能が適切に使えるようになります。
コードの可読性が上がるため
コードの情報構造がわかりやすくなり、レビュー時や後から見返したときにコードを読みやすくなります。
（すべてのdivから特定のセクションを探すよりも、sectionやhから探す方が見つけやすいという感じです。）
また、タグの対応関係が判別しやすくなるため、ヒューマンエラーを減らせます。
解析しやすくなるため
検索エンジンにとっても理解しやすい構造を提供するため、SEOが向上します。
関連記事