HTML5セマンティックタグ（モバイル必須）

HTML5の標準仕様が策定・公開されてから数年が経過し、取材でも必然的にHTML5のセマンティクスの理解が求められるようになりました。しかし実際には、まだバージョンの低いブラウザを使っているユーザーがいることもあってか、HTML5のタグを開発に使っている人はあまりいないようです（追記：推論でいくつかの巨大企業のWebサイトを確認しました）。

でも個人的には、いくつかのタグを選ぶと絡んでしまうので、いまだにdivを使っています（追記：そのためにこの記事です、はい、これからはセマンティクスに気をつけないといけませんね）

セマンティック化とは？h1~h6で見出しを定義するように、コンテンツを感覚的で正しいタグで表現することです。

セマンティック化のメリット

ユーザーにとって読みやすく、スタイルがない場合にも明確なページ構造を与えることができます。
SEO対策に有効、検索エンジンはタグに基づいて個々のキーワードの文脈と重みを判断する。
盲目の読者が意味論に基づいてページをレンダリングするなど、他のデバイスでの解析が容易
開発とメンテナンスに有益で、セマンティクスがより読みやすくなり、コードのメンテナンス性が向上し、CSS3との関係もより調和がとれる。

今日はまず、次の画像のようなbody構造タグから始めます。

1. <ヘッダー>

<header> 文書または文書の一部を定義するヘッダーで、導入コンテンツやナビゲーションリンクバーのコンテナとして機能する必要があります。

一つの文書に複数の <header> 要素を定義することができますが、 <header> 要素は <address>, <footer>, <header> 要素の子にはできないことに注意してください。

2. <nav>

<nav> は、他のページやページ内の他の部分にジャンプするためのリンクのリストを含む、複数のハイパーリンクを持つ領域を記述します。

1つの文書に複数の <nav> 要素を定義することができます。

3. <main>

サイドバー、ナビゲーションバーリンク、著作権情報、サイトロゴ、検索ボックス（検索ボックスがドキュメントのメイン機能として使用されている場合を除く）など、ドキュメント内で重複するコンテンツを含まない、ドキュメント内でユニークなコンテンツである必要があります。

なお、1つの文書に複数の<main>タグを出現させることはできません。

4. <article>

article>要素は、独立して割り当て可能で再利用可能な、ドキュメント、ページ、アプリケーション、またはウェブサイト内の個別の構造を表します。例えば、フォーラムの投稿、雑誌またはニュース記事、ブログ、ユーザー投稿コメント、インタラクティブコンポーネント、または他の個別のコンテンツアイテムであるかもしれない出版では、そうなります。

article> 要素が入れ子で使われる場合、その要素は囲んだ要素に関連する記事を表します。例えば、ブログのコメントを表す <article> 要素は、ブログの記事を表す <article> 要素の中にネストさせることができます。

5. <aside>

<aside> 要素は、ページの他のコンテンツとはほとんど関係がなく、そのコンテンツの独立した部分とみなされ、全体に影響を与えることなく個別に分割できるセクションを表します。これは通常、サイドバーや埋め込みコンテンツとして表現されます。

6. <フッター>

<footer> 直近のセクションコンテンツまたはルート要素に対するフッターを定義します。フッターは通常、セクションの著者、著作権データ、文書に関連するリンクなどの情報を含みます。

フッターを使用して連絡先を挿入する場合は、フッター要素内に <address> 要素を使用する必要があります。

なお、<footer>や<header>.は含めることができません。

7. <section>

<section> は、ドキュメント内の領域（またはセクション）、例えばコンテンツ内のトピックグループを示します。

要素の内容がセクションに分けられる場合は、<section>の代わりに<article>を使用する必要があります。
特に、<section>がスタイリングやスクリプトの目的だけの場合は、<div>を使って通常のコンテナとして使用しないようにしましょう。

これらのタグ、紛らわしいのは <section>, <article> ですので、ここで特に注意してください。

"著者は、section要素の代わりにarticle要素の内容をシンジケートすることが理にかなっている場合、その要素を使用することが推奨されます。

平たく言えば、<section>よりも<article>の方が独立性と完成度が高いということです。これは、段落が完全で、その段落がある文脈から独立しているかどうかで判断することができます。