セマンティックタグ: header、nav、main、article、footer

セマンティックHTMLは、見た目だけでなくコンテンツの意味を表す要素を使用します。<article>は「これは独立したひとまとまりのコンテンツです」という意味です。一方、汎用的な<div>からは何も読み取れません。

初期のWeb開発者は、<div>と<span>要素だけでレイアウト全体を構築していました。スクリーンリーダーは、ナビゲーションとコンテンツ、広告を区別できませんでした。検索エンジンは、ページ構造を推測する必要がありました。

<header>要素には、ページまたはセクションの導入コンテンツを含めます。通常は、ロゴ、サイト名、ナビゲーションなどです。1つのページに複数のヘッダーを置くこともできます。サイト用に1つ、各記事に1つずつ配置することも可能です。

<nav>は、ナビゲーションリンクのまとまりを囲むために使用します。メインメニュー、パンくずリスト、目次などが該当します。スクリーンリーダーはnavランドマークを通知するため、ユーザーはそこへ直接移動したり、通り過ぎたりできます。

1ページにつき<main>は1つだけにしてください。そのページ固有の主要なコンテンツを含め、ナビゲーションやフッターのような繰り返し要素は含めません。支援技術を使うユーザーは、mainへ直接移動できます。

<article>は、それだけで意味が通り、配信や転載が可能なコンテンツを囲みます。ブログ記事、ニュース項目、ユーザーコメント、商品カードなどが該当します。「別のサイトにコピーしても意味が通るか？」と考えてみてください。

<section>は、章、タブ、トピック領域など、関連するひとまとまりのコンテンツをグループ化します。通常、各セクションには見出しを付けます。コンテンツが単独で成り立つ場合は、articleを使用してください。

<aside>には、周囲のコンテンツと間接的に関連する内容を含めます。サイドバー、抜粋、広告、関連リンクなどが該当します。スクリーンリーダーは、これを補足的なランドマークとして示します。

<footer>には、それを含む要素に関する情報を含めます。著作権表示、連絡先リンク、関連ドキュメントなどが該当します。headerと同様に、1つのページに複数のフッターを置くこともできます。

見出しを使って、論理的なドキュメント構造を作成してください。1ページに<h1>は1つだけにします。小見出しにはh2、その下位の見出しにはh3というように使用します。レベルを飛ばしたり、見た目の大きさだけを理由に見出しを使ったりしないでください。

検索エンジンは、セマンティックな構造を使ってページの内容を理解します。適切なランドマークと見出しの階層を備えたページは、検索順位が高くなることがよくあります。スクリーンリーダーのユーザーはランドマークや見出しを使って移動するため、セマンティクスはアクセシビリティに直接関わります。

<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>を使うと、ブラウザー、検索エンジン、スクリーンリーダーが理解できる構造をドキュメントに与えられます。