最終更新日

nav要素

別のページまたはページ内の別の場所へのリンクの集まりを示します。サイトの各場所へのリンク一覧など、「主要な」リンクの一覧をnav要素で囲むことで、ユーザーはページの表示時に利用可能なコンテンツをすばやく判断できます。

一覧形式のコンテンツだけでなく、文章内に複数のリンクが含まれている場合でも、nav要素として使用可能です。nav要素は、Flowコンテンツの記述箇所で使用できます。

サイトの各場所へのリンク一覧がfooter要素に含まれる場合には、nav要素は使いません。

HTML5での変更点
・nav要素は、HTML5で追加された新しい要素です。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Sectioningコンテンツ
省略不可 Flowコンテンツを子にできる要素 Flowコンテンツ
属性 説明
グローバル属性 - -
イベント属性 - -
サンプルコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>マクドエイド</title>
  </head>
  <body>
    <p>バーガーショップ「マクドエイド」にようこそ!</p>
    <nav>
      <h1>メニュー一覧</h1>
      <ul>
        <li><a href="burger.html">ハンバーガー</a></li>
        <li><a href="cheese.html">チーズバーガー</a></li>
        <li><a href="fish.html">フィレオフィッシュ</a></li>
      </ul>
    </nav>
  </body>
</html>
参考文献:W3C HTML5「4.4.3 The nav element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。