nav
nav要素は他のページや、ページ内の別パーツにナビゲーション情報を表します。
ページ内ヘッダーのグローバルナビゲーションや、サイドバーのコンテンツナビゲーションを用いられます。
カテゴリー
フロー・コンテント
セクショニング・コンテント
パルパブル・コンテント
nav属性
固有の属性はありません。
nav使用例
nav使用例(グローバルナビ)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>T.O | tech.pjin.jp</title> </head> <body> <header> <nav> <ul class="globalnav"> <li>TOPへ</li> <li>このサイトについて</li> <li>カテゴリー</li> <li>お問い合わせ</li> </ul> </nav> </header> <main> <section> <h1>ページの見出し</h1> <p>(内容…)</p> </section> </main> </body> </html>
nav使用例(フッターナビ)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>BURNING | tech.pjin.jp</title> </head> <body> <main> <section> <h1>ページの見出し</h1> <p>(内容…)</p> </section> </main> <footer> <nav> <div class="left"> 学ぶ <ul> <li>CCNA</li> <li>LPIC</li> <li>JAVA</li> <li>LAMP</li> </ul> </div> <div class="right"> 会社概要 <ul> <li>沿革</li> <li>代表あいさつ</li> <li>企業理念</li> <li>スタッフ紹介</li> <li>お問い合わせ</li> </ul> </div> </nav> </footer> </body> </html>
nav使用例(パンくず)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>No.16 | tech.pjin.jp</title> </head> <body> <header> <nav> <ol class="breadcrumb"> <li>ホーム</li>> <li>HTML</li>> <li>タグリファレンス</li>> <li>セクション</li>> </ol> </nav> </header> <main> <section> <h1>ページの見出し</h1> <p>(内容…)</p> </section> </main> </body> </html>