nav要素

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>