nav要素
nav要素は、ナビゲーションであることを示す要素。
| カテゴリー | フロー・コンテンツ。セクショニング・コンテンツ。パルパブル・コンテンツ。 |
|---|---|
| コンテキスト | フロー・コンテンツを内包できる要素内で使用できる。 |
| コンテンツ・モデル | フロー・コンテンツを内包できる。 ただし、main要素を子孫要素に持つことはできない。 |
| 属性 | グローバル属性。 |
| ブラウザ対応 |      |
要点
- nav要素は、ナビゲーションであることを示す要素である。
- nav要素内には、グローバル・ナビゲーション、ページ内リンクなどを配置する。
- 全てのリンクをnav要素で括る必要はない。主なページ、主なコンテンツへのリンクを括り区画する。
- nav要素は、セクショニング・コンテンツである。新たなセクションを区画する。
- nav要素は、HTML5にて新たに導入された要素である。
ナビゲーションに含める主な内容
nav要素内に配置する具体的な例。
- グローバル・ナビゲーション
- パンくず
- ページ内リンク
お問い合わせフォームへのリンクや、リンク集のページへのリンクなどは、ナビゲーションのセクションに含める必要はない。フッターに含めることが多い。
サンプルコード
<nav> ナビゲーション。 </nav>
グローバル・ナビゲーション
<body> <header> <h1>ページタイトル</h1> <p>ページの概要。</p> <nav> <h2>グローバル・メニュー</h2> <ul> <li><a href="">メニューＡ</a></li> <li><a href="">メニューＢ</a></li> <li><a href="">メニューＣ</a></li> </ul> </nav> </header> <article> 記事セクション </article> </body>
パンくず
<body> <header> <h1>ページタイトル</h1> <nav> <ul> <li><a href="">ホーム</a> ≫ </li> <li><a href="">親ページ</a> ≫ </li> <li>現在のページ</li> </ul> </nav> </header> <article> 記事セクション </article> </body>
ページ内リンク
<article> <header> <h2>記事タイトル</h2> <p>記事の概要。</p> <nav> <h3>ページ内リンク</h3> <ul> <li><a href="#sectionA">セクションＡ</a></li> <li><a href="#sectionB">セクションＢ</a></li> </ul> </nav> </header> <section id="sectionA"> <header> <h3>セクションＡの見出し</h3> <p>セクションＡの概要。</p> </header> <p>記事の内容。</p> <p>...</p> </section> <section id="sectionB"> <header> <h3>セクションＢの見出し</h3> <p>セクションＢの概要。</p> </header> <p>記事の内容。</p> <p>...</p> </section> </article>
サンプル
HTMLソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> </head> <body> <header> <h1>ページタイトル</h1> <p>ページの概要。</p> <nav> <h2>グローバル・メニュー</h2> <ul> <li><a href="">メニューＡ</a></li> <li><a href="">メニューＢ</a></li> <li><a href="">メニューＣ</a></li> </ul> </nav> </header> <article> <header> <h2>記事タイトル</h2> <p>記事の概要。</p> <nav> <h3>ページ内リンク</h3> <ul> <li><a href="#sectionA">セクションＡ</a></li> <li><a href="#sectionB">セクションＢ</a></li> <li><a href="#sectionC">セクションＣ</a></li> </ul> </nav> </header> <section id="sectionA"> <header> <h3>セクションＡの見出し</h3> <p>セクションＡの概要。</p> </header> <p>記事の内容。</p> <p>...</p> </section> <section id="sectionB"> <header> <h3>セクションＢの見出し</h3> <p>セクションＢの概要。</p> </header> <p>記事の内容。</p> <p>...</p> </section> <section id="sectionC"> <header> <h3>セクションＣの見出し</h3> <p>セクションＣの概要。</p> </header> <p>記事の内容。</p> <p>...</p> </section> </article> </body> </html>