セクショニングを行うタグを解説します。
セクショニングは、目的ごとに領域を分割し、ウェブサイトの構造を明確にします。
それにより、ブラウザはウェブサイトの目的、役割をより理解し、閲覧者にも同様の効果を与えます。
- body
- ウェブサイトの全ての領域
- header
- ウェブサイト名やページ名、ナビゲーションリンクを設置する領域
- h1
- ウェブサイト名、もしくはページ名
- nav
- ナビゲーション。ウェブサイト内の他ページやページ内のリンクを記述するなどナビゲーション的な役割を担う領域
- main
- ウェブサイトの本文を記述する領域
- section
- 汎用セクション。ページ内の同様のコンテンツを区切る
- article
- セクション内の本文を記述する領域
- aside
- セクション内の補足的な内容を記述する領域
- footer
- セクション内、或いはページ最下部に設置し、管理者の情報、関連する文書へのリンク、著作権情報などを記述する領域
- address
- 管理者のアドレスなど
<header>の記述例
<header>
<h1>Site Name</h1>
<a href="#nav">Menu</a>
<nav id="nav">
<ul>
<li><a href="">About</a></li>
<li><a href="">Rule</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
通常時、ナビゲーションは非表示にしておいて、
<a href="#nav">Menu</a>
で表示する仕様です。
このような仕様はウェブサイトの構造をより明確にする効果があります。
上記のように、
<body>内の領域は
<header>、
<main>、
<footer>の大きく３つの領域に別れていることがわかります。
このようにウェブサイトの構造を明確にするのがHTMLの役割です。