はじめに

この記事の目的

セマンティックという言葉の意味を知る
「セマンティックなコーディング」とは何で、何の為に行っているのかを知る

目指すレベル感

「言葉だけ知っている」から「ざっくりこういうこと」を説明できる状態になる
中堅以上のIT業界の方々には「そんなの知ってますが？」という内容かもしれない

「セマンティック」とはどういう意味か

まずは辞書的な意味から。
セマンティックの言葉の意味は以下の通り。

セマンティックとは、一般的には「意味」や「意味論」に関することを指す語である。
IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。

セマンティックなコーディングとは、HTMLに限らずプログラミング言語を用いたコーディング全般に対して言えることのようです。

ここでの「コンピュータに文書や情報の意味を正確に解釈させ」るというのは、
例えば見出しならheadingタグを使用するといったように、文書にある情報が何なのかがコンピュータに分かるようにコーディングをするということ。

つまりセマンティックなコーディングとは、コンピュータにこちらが表現したいものを伝え、正しく理解してもらうための作業であるということですね。

セマンティックなコーディングをすると何が良いのか

先ほどの章で、セマンティックなコーディングをするとこちらが表現したいことをコンピュータに理解してもらえるということが分かりました。

では理解してもらえると何が良いのか。
例としてHTMLでコーディングを行う場合に絞ってまとめていきます。
主に以下の2つの理由が説明されていました。

SEO対策になる

セマンティックを調べると必ずと言っていいほどセットで出てきました。
SEOについての詳細な説明はここでは省きますが、日本語で言えば「検索エンジン最適化」と言われるものです。
検索エンジンを通してターゲットとなる顧客が来てくれるように、Webサイトやコンテンツを最適化することです。

セマンティックなコーディングをすると、コンピュータに理解してもらえるということは先ほど述べました。
逆を言えば、セマンティックでないページはコンピュータに理解されにくくなります。

例えば以下のようなページがあるとしましょう。

<div>
    <div>見出しです</div>
    <div>
        <div>リスト1つ目です</div>
        <div>リスト2つ目です</div>
        <div>リスト3つ目です</div>
    </div>
    <div>
        <div>リストの要素です</div>
        <div>リストの要素です</div>
        <div>リストの要素です</div>
    </div>
</div>

これではコンピュータは「どこが何の要素なのか？」がわかりません。
自分が理解できないものは他人にもお勧めできないので、検索上位にも上がってきません。

<main>
    <h1>見出しです</h1>
    <ol>
        <li>リスト1つ目です</li>
        <li>リスト2つ目です</li>
        <li>リスト3つ目です</li>
    </ol>
    <ul>
        <li>リストの要素です</li>
        <li>リストの要素です</li>
        <li>リストの要素です</li>
    </div>
</main>

ページの主要エリアに見出し、箇条書きリスト、番号付きリストがあることを示しました。
先ほどよりもコンピュータにとってわかりやすいページ構造になっています。

アクセシビリティのため

これも必ずと言っていいほどセットで出てきた理由です。

アクセシビリティとは特にWebサイト上における、情報やサービスへのアクセスのしやすさのことを指します。

具体例を列挙すると、以下のようなものです。

スクリーンリーダーが、headingタグでコーディングされた見出しを拾い読みできる
ボタン要素に、マウスだけではなくキーボードでもアクセスできる
画像が表示できないほど電波の悪い環境でページを開く

SEOが対コンピュータだったのに対し、アクセシビリティは対ユーザーという見方もできるでしょうか。

まとめ

大きく以下の2つです。

セマンティックとは「意味」や「意味論」に関することを指す語で、コンピュータに文書や情報がもつ意味を正確に理解させること。
セマンティックなコーディングを行うことで、SEO対策・アクセシビリティのためになる。

参考サイト

セマンティックとは (semantic) IT用語辞典バイナリ
 セマンティック検索とは？特徴やSEOへの影響を解説！
セマンティックHTMLによるウェブアクセシビリティの向上とテスト技法・ツールについて

関連記事