この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
セマンティックコーディングとは
セマンティック（セマンティクス）は「意味的な」などと訳される形容詞で、セマンティックコーディング（または、セマンティックHTML）とは、HTMLタグが持つ意味と役割を正しく使ってマークアップするという考え方です。
セマンティックコーディングでは、例えば見出しタグは装飾目的で使うのではなく、見出しタグが持つ本来の意味である「文章構造の最適化」のために使います。
セマンティックコーディングを施すことで「検索エンジン最適化」「アクセシビリティ向上」「ソースコードの可読性向上」などのメリットがあります。
セマンティックコーディングの必要性
セマンティックコーディングの目的は、主にコンピュータに文章の構造を細かく理解させるためです。コンピュータとは主に検索エンジンのクローラや、閲覧ユーザーのブラウザが該当するかと思います。
HTMLタグには様々な種類のタグがありますが、タグの持つ意味を考慮せずに記述しても、CSSで見た目を整えればブラウザ上では問題なく表示されるため、閲覧ユーザーにとってはなにも影響はありません。極端に言えば、divタグだけでページを作成することができます。しかしコンピュータはページの文章構造をデザインで判断しません。したがって、可能な限りセマンティックなマークアップを行い、明示的に「これは見出しです」「これは表です」「これはグローバルナビゲーションです」などとテキストの持つ文脈上の意味を伝えていく必要があるのです。
検索エンジン最適化（SEO）
特に検索エンジンのクローラはCSSやJavascriptで表現されたコンテンツを無視します（正確には検索エンジンのデータベースにインデックスしません）。例えば、CSSやJavascriptで画像を設置しても、ブラウザ上では画像が表示されますが、検索エンジンには認識されません。この場合、SEO的に考えれば重要な意味を持つ画像であればimgタグやfigureタグでマークアップするべきであると言えます。
他にもCSSで見た目を整えてしまって、ないがしろにされがちな要素に「ul・ol・dl」、「table」「blockquote」、「em」などがあるかと思います。タグを適材適所に使っていくことで、検索エンジンに明確な情報を伝達可能となります。
アクセシビリティ向上
視覚障碍を持つユーザーは、スクリーンリーダーなどの音声読み上げツールを使用してコンテンツを読みます。適切にマークアップされていれば、スクリーンリーダーが文章を解析しやすくなるメリットがあります。例えば表を作成する場合、tableタグなどで適切にマークアップされていないと、スクリーンリーダーが表の構造を理解できず、読み上げる順番がおかしくなる可能性があります。
ソースコードの可読性向上
Webサイトの保守運用において、第三者がWebサイトの改修を行う際、セマンティックなマークアップで記述されていれば、コードの構造がわかりやすくなります。
セマンティックコーディングで意識したいタグ
セマンティックコーディングを行うには、HTMLタグの持つ意味を理解した上で要素を使い分けて行く必要があります。どれだけ多くのタグを知っているかどうかになるので下記のページでタグ一覧をご確認いただければと思います。
ここでは、あらゆるWebサイトで頻出のセマンティックタグを紹介していきます。
- article：内容が完結・独立したコンテンツを表す。記事など。
- aside ：メインコンテンツとの関連性が低く、補足的な情報であるセクションを表す。
- footer：フッターを表す。フッターは関連リンク、コピーライト、著者情報などが含まれる。
- header：ロゴ、ナビゲーション等のページ導入部を表す。
- main：文書の主要な内容を表す。1ページに一つまで。
- nav：ナビゲーションリンクである事を表す。主要なリンクの集合に使う。
- section：文書のまとまりを作るための汎用的なタグ。見出しがあると良い。
セマンティック要素はおよそ100あり、上記はその一部です。これらの要素を適材適所に使っていく必要があります。
まとめ
セマンティックコーディングは、Webサイトの見た目とは関係がなく軽視されがちな部分ではあります。覚えるのは大変ですが、セマンティックコーディングを意識することは、検索エンジン、ユーザー、開発者にメリットをもたらします。
