目次に戻る

nav要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、navigation。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、menu、menubar、tablist、presentation、noneを指定可。
視覚系ブラウザのデフォルトとして期待されるCSS

  nav {
    display: block;
    unicode-bidi: isolate;
  }
意味・用法

ナビゲーションリンクを含むセクションを表す。

主要なナビゲーションを含むセクションを、主な対象とする。

私見・補足

例→おおむねウェブサイト内で共通するサイトナビゲーション、ウェブページ内目次、ウェブサイト内検索フォームなど。

Sectioning contentなので、実際に見出しを入れるかどうかはともかく、Heading contentで見出しを入れると不自然になるようなブロックには、そもそもふさわしくない。「主要なナビゲーションを含むセクションを、主な対象とする」というのも、そういう意味合いと思われる。

定義からある程度役割は明確だが、Heading contentで見出しをつけた方が親切。見出しの文言としては、「目次」、「ページ目次」、「サイトナビ」、「サイト案内」、「サイト内検索」など。

nav要素の用例

    <body>
      <h1>○○のブログ</h1>
      <article>
        <h2>記事１</h2>
        <p>文章</p>
      </article>
      <article>
        <h2>記事２</h2>
        <p>文章</p>
      </article>
      <article>
        <h2>記事３</h2>
        <p>文章</p>
      </article>
      <p><a href="nextpage.html">次へ</a></p>
      <nav>
        <h2>ブログ案内</h2>
        <ul>
          <li><a href="list.html">更新順記事一覧</a></li>
          <li><a href="category.html">カテゴリー別記事一覧</a></li>
          <li><a href="search.html">ブログ内検索</a></li>
        </ul>
      </nav>
    </body>