「セマンティックHTML」という言葉を聞いたことはありますか？
HTMLを扱う上で、これはとても重要な考え方とされています。
セマンティックHTMLでコーディングしたウェブコンテンツは、可読性、保守性に優れ、SEOにも有利になると言われています。
しかし、それだけではありません。
実は、ウェブアクセシビリティの向上にも繋がっているのです！
本記事では、セマンティックHTMLの基本について解説します。
セマンティックHTMLについて初めて耳にする方も、既に使いこなしている方も、この記事を通じてその重要性を確認していただき、ウェブアクセシビリティへの理解を深めてもらえたら嬉しいです！
1.セマンティックHTMLとは？
セマンティックHTMLとは、HTMLを使用してマークアップする際に、HTMLの構造が適切な意味を持つようにコーディングすることを指します。
構造や意味を明確に表すようにコーディングすることで、ユーザーだけでなく検索エンジンにとってもわかりやすいウェブコンテンツにすることができます。
そして、その結果SEOで有利になると言われています。
さらに、スクリーンリーダーのようなアクセシビリティツールにとっても理解しやすいコンテンツを作成することができるため、ウェブアクセシビリティを高める上でとても大切なコーディング方法となります。
セマンティックHTMLでのコンテンツ制作はウェブアクセシビリティに関係なく重要なことですが、それだけでなくセマンティックHTMLに準じて作るだけで、ある程度ウェブアクセシビリティを向上させることができるのです。
1-1.セマンティックHTMLの重要性
セマンティックHTMLは、コンテンツの内容が分かりやすくなるためSEOに有利で、またウェブアクセシビリティを高める助けになるとお話ししました。
ここでは、セマンティックHTMLの重要性についてもう少し詳しくご紹介します。
1-1-1.コードの可読性と保守性の向上
セマンティックHTMLはHTMLの可読性と保守性を向上させます。
HTMLのタグには、固有の意味を持つタグと持たないタグがあります。
固有の意味を持つタグの例として、ヘッダーを表すheaderタグ、フッターを表すfooterタグなどがあります。
意味を持たないタグの例はdivタグやspanタグです。
こういった意味を持つタグ、持たないタグをしっかり使い分けることで、どの部分が何を表しているのかが一目で理解しやすくなります。
その結果、コードの可読性が向上するのです。
また、後からコードを見たときにどの部分が何を表しているのかが分かりやすいというのは、長期的に使用するウェブコンテンツの運用や複数人で管理を行うプロジェクトにおいて都合がよく、保守性の向上が見込まれます。
1-1-2.SEO対策
セマンティックHTMLはSEOに大きく関わります。
というのも、意味や構造が明確であるウェブコンテンツにすることで、検索エンジンにとって分かりやすいコンテンツになります。
そうして、コンテンツの内容が効率的に理解されることでインデックスされやすくなり、検索結果の表示順向上に繋がる可能性があるのです。
また、ウェブアクセシビリティの向上やユーザーエクスペリエンスの向上からユーザーのサイト離脱率が下がったり、滞在時間が長くなったりすることも考えられます。
こういったこともまた、検索エンジンでの評価が上がる要因となります。
1-1-3.アクセシビリティの向上
セマンティックHTMLは、ウェブコンテンツのアクセシビリティを大幅に向上させることができます。
それぞれ明確な意味を持っているタグを適切に使用すると、そのコンテンツの構造がスクリーンリーダーにも伝わります。
そうするとスクリーンリーダーを利用している人は各セクションの目的や内容を簡単に理解することができるようになります。
また、構造を明確にすることで、テキストリーダーを使用してページ内を自由に移動することができるようになります。
例えば、headerタグ、mainタグ、footerタグを使用してコーディングすると、ページが読み込まれてすぐに、mainタグに移動することができるようになります。
こうすることで、ユーザーはページごとに毎回表示される同一ヘッダーをスキップして本文にすぐ到達することができます。
これにより、必要な情報を迅速に見つけることができるようになるのです。
また、入力フォームにおいてlabelタグを適切に使用することで、フォームの入力欄が何を意味するのかを明確にすることができます。
このように、セマンティックHTMLを意識して制作するだけでテキストリーダーやユーザーにコンテンツの内容や構造を適切に伝えることができるようになり、ウェブアクセシビリティの向上に繋がるのです。
2.セマンティックHTMLの基本
2-1.よくあるウェブサイトの構造
よくあるウェブサイトの構造を図で表すと、以下のようになります。
極端なことを言えば、この構造をdivタグのみで再現することも可能です。
ですが、そのように制作してしまうとコードの可読性、保守性が下がってしまいますし、ユーザーにとっても検索エンジンにとっても分かりづらいサイトになってしまう可能性があります。
ですから、しっかりとタグを使い分けてセマンティックHTMLを意識しましょう。
セマンティックHTMLでコーディングする際のHTML構造は、以下のようになります。
図だけではなく、実際のコードでも見てみましょう。
このように、タグの意味や役割を意識してコーディングすると、どこからどこまでがヘッダーなのか、どの部分が1つのセクションなのかなど、サイト全体の構造がとても分かりやすくなります。
2-2.タグごとの意味や使い方
セマンティックHTMLでは、タグを適切に使用する事でコンテンツの構造と意味を分かりやすくします。
下記に、非常によく使われるタグの意味や使い方をご紹介します。
ページやセクションのヘッダーを表すために使用されます。
通常、ロゴやナビゲーションメニュー、サイト名などが含まれます。
ページやセクションのフッターを表すために使用されます。
通常、コピーライトや連絡先などが含まれることが多いです。
2-2-3.navタグ
ナビゲーションメニューを表すために使用されます。
主にウェブサイト内のメインナビゲーションやサイドバーナビゲーションに使われます。
2-2-4.articleタグ
独立して完結しているコンテンツを表すために使用されます。
例としては、ブログ記事やニュース記事などです。
2-2-5.sectionタグ
ページ内の関連するコンテンツをまとめるために使用されます。
articleタグと似ていますが、articleタグよりも大きいくくりで使用されることが多いです。
2-2-6.asideタグ
メインコンテンツから独立した、追加情報を表すために使用されます。
サイドバーや広告などに使われることが多いです。
2-2-7.mainタグ
ページのメインコンテンツを表すために使用されます。
2-2-8.見出しタグ（h1タグからh6タグ）
コンテンツの見出しを表すために使用されます。
h1タグが一番大きな見出しで、h6タグが一番小さい見出しです。
ここで示したもの以外にもたくさんのタグが存在します。
しかし、最初からすべてを覚える必要はありません。
以下のような参考サイトで自分がよく使用するタグの意味を確認したり、新しいタグを使用するときにその適切な使い方を確認してみてください。
そのようにすると、自然と知識が蓄積されていくかと思います。
参考：MDN web docsのHTML要素に関する解説記事
2-3.似ているタグの比較
同じような意味を持つタグはいくつかありますが、それぞれ別の使用目的や独自のニュアンスがあります。
以下に、似た意味を持つが異なる目的で使用されるタグの例をいくつか挙げます。
2-3-1.articleタグとsectionタグ
どちらも1つの塊を表すときに使用します。
sectionタグは、独立した1つのセクション（区切り）を表すために使用されます。
通常、sectionタグの中に見出しタグ（h1タグやh2タグなど）が1つ以上含まれる必要があります。
articleタグよりも大きな区切りを表すことが一般的です。
articleタグは、独立していて、さらに自己完結しているコンテンツを表すために使用されます。
sectionタグと異なるのは「自己完結している」という部分ですが、これは「それ自体が独立した内容を持っていて、サイト内の他の部分などで再利用可能な内容である」ということです。
具体的な例としては、ブログの投稿やニュースの記事などです。
少し複雑なので、図を見てみましょう。
下の図のようにブログの最新記事が表示されるコンテンツがあった場合、そのコンテンツ全体を囲むタグがsectionタグとなります。
そして、それぞれのブログ記事を囲むタグがarticleタグになります。
「それ自体が独立した内容を持っていて、サイト内の他の部分などで再利用可能な内容である」と書くと難しい感じがしますが、ブログやニュースの最新記事を何件か表示させる箇所などに使用することをイメージすると分かりやすいのではないでしょうか。
ちなみに、チャコウェブホームページの場合も同じような使い方をしています。
ブログ記事がそれぞれarticleタグで囲まれていて、そのさらに外側にsectionタグがあります。
また、sectionタグ内には見出しタグを含めることが推奨されていますので、「お役立ちブログ」部分は見出しタグを使用しています。
2-3-2.olタグとulタグ
どちらもリストを作るときに使用します。
olタグは、順序付きリストを作成するために使用されます。
行頭文字は番号やアルファベットでマークされます。
リストの順番を入れ替えることができない、意味合いとして順序が重要なリストに使われます。
ulタグは、順序なしリストを作成するために使用されます。
行頭文字は点や丸でマークされることが多くあります。
リストの順番を入れ替えても特に問題のない、意味合いとして順序が重要ではないリストに使われます。
下図は順序付きリストと順序なしリストを並べたものです。
左側は「目玉焼きの作り方」を箇条書きにしていますが、作り方は順番を入れ替えることができないので順序付きリストになります。
右側は「冬が旬のくだもの」を箇条書きにしています。
順番を前後させても特に問題がないので、こちらは順序なしリストです。
リストを作る際、順序付きリストと順序なしリストのどちらにするべきか迷うこともあると思います。
そんなときは、順番を前後させることで意味合いが変わったり、問題が発生しないかを基準に考えてみてください。
2-3-3.tableタグとdivタグ
表形式のコンテンツを作る際、常にtableタグを使用するのは適切ではありません。
tablelタグはデータを行と列の形式で表示するために使用されるタグです。
構造化されたデータの表示に使用するのが適切です。
divタグは特に決まった意味がなく、汎用的に使用されます。
特定のデータ構造は持たないが表形式で表示したいコンテンツの場合、divタグを使用してマークアップし、CSSで表形式にレイアウトを調整します。
下に具体例を挙げます。
こちらは「お米の収穫量ランキング」の簡易的な表です。
この表では、お米の収穫量の順位や都道府県のデータをまとめているので、tableタグを使用して表形式で表示するのが適切でしょう。
次の図は、表組みで制作されたお問い合わせフォームの画像です。
こういった表組みのレイアウトは、tableタグを使用して実装されることが多くあります。
しかし、このようにデザインとして表の形にするときにtableタグを使用するのは推奨されていません。
なぜなら、実際にはデータをまとめているわけではないのに、tableタグを使用していることでスクリーンリーダーにデータとして伝わり誤解を招いてしまう可能性があるからです。
このような場合はdivタグを使ってマークアップし、CSSで表組みの形に整える方が適切だと考えられます。
これらのタグは似たような役割を果たすことがありますが、細かなニュアンスも含めて適切なタグを使用することでページの構造や内容を明確にすることができます。
各タグが持つ特定の意味や目的をしっかり把握し、使い分けることが重要です。
3.まとめ
今回はセマンティックHTMLの重要性と、よく使われるタグについてご紹介しました。
使い方が似ているタグもありますが、正しく使い分けることでページの構造や意味、コンテンツの役割などを明確に表現することができ、人にとっても検索エンジンにとってもわかりやすいコンテンツにすることができます。
また、セマンティックHTMLを意識してコーディングするだけで、難しい実装などを行わずともある程度のウェブアクセシビリティを確保できるようになります。
ぜひ、タグの使い分けを意識してセマンティックなコーディングを行ってみてください！
