HTMLの構造をブラウザや検索エンジンに正しく理解してもらうためには、
タグを適切に使い分ける「セマンティックコーディング」が重要となります。

セマンティックコーディングとは

セマンティックコーディングとは、文書の構造や意味を、ブラウザや検索エンジンに正しく理解させることを目的としたコーディングです。

divタグやspanタグの組み合わせで作られたものは、ブラウザや検索エンジンには、ヘッダーなのか、ナビゲーションなのか、フッターなのか、等を識別できません。
ヘッダーにはheaderタグを、フッターにはfooterタグを、というように、適切な場所で適切な要素を使うことで、ブラウザや検索エンジンに正確なHTML構造を伝えることが出来ます。

また、要素の役割が明確になることで、開発者にとっても読みやすいコードとなります。
本記事で紹介するタグは「セマンティック要素」とも呼ばれます。

セクショニング・コンテンツ（要素）

セクショニング・コンテンツ（要素）とは、セクションの範囲を明示的に定義し、検索エンジンが文書の構造を理解するのを助ける要素です。
以下のタグが、セクショニング・コンテンツ（要素）に分類されます。

sectionタグ

sectionタグは、文書の章や節であることを示します。
sectionタグ内には、見出し要素（h1～h6）を含む必要があります。

navタグ

navタグは、ナビゲーションリンクを含むセクションであることを示します。
navタグのnavは「navigation」を意味します。

asideタグ

asideタグは、ページのメインコンテンツと直接関連しない、補足的な情報であることを示します。
主に、広告や各種リンクなどを含むサイドバーに使用されます。

articleタグ

articleタグは、ブログ記事やニュース記事等、独立したコンテンツであることを示します。

sectionタグとの違い
articleタグで囲んだものは、それだけで1つのコンテンツとして完結する必要があります。
章や節などの記事の1部分をarticleで囲むことはしません。

対して、章や節などの、1部分を囲む場合にはsectionタグを使います。

その他の要素

以下は、セクショニング・コンテンツ（要素）には分類されませんが、検索エンジンが文書構造を理解しやすくするのに使用するタグです。

headerタグ

headerタグは、ページやセクションのヘッダーであることを示します。
主に、ロゴ、見出し、ナビゲーションなどの要素を含みます。

footerタグ

footerタグは、最も近いセクションのフッターであることを示します。
主に、著作権情報、連絡先情報などの要素を含みます。

mainタグ

mainタグは、ページのメインコンテンツであることを示します。
mainタグは1ページに1回しか指定できません。

figureタグ

figureタグは、メインコンテンツと関わりがあるものの、自己完結するコンテンツであることを示します。
簡単に言うと、なくてもコンテンツは成り立つが、あるとよりわかりやすくなるコンテンツを囲む場合に使います。
主に、写真、図表、挿絵等に使用されます。

figcaptionタグ

figcaptionタグは、figure内のコンテンツに、キャプション（タイトルや説明）を付けるために使用します。

配置例