お問い合わせ

nav要素

nav要素はHTML5から新たに追加された要素です。

nav要素は主要なナビゲーションブロックから成るセクションを表します。他のページへのリンクが複数存在するセクションや、サイト内を回遊する上で重要なナビゲーションリンク（ページ内リンクを含む）をもつセクションがnav要素としてマークアップされます。そのため文書内全てのリンクリストをnav要素にマークアップするのは誤りです。

一般的に、 footer要素 のコンテンツに様々なページへのリンクリストを含むことが多いですが、そのような場合footer要素単独で十分であり、nav要素は必ずしも必要とされるわけではありません。内容が重複しており、フッタ内よりも主要であるナビゲーションのグループがHTML文書内に存在する場合は、フッタ内のリンクリストをnav要素にマークアップすることは妥当ではありません。

使用例

<header>

<h1>ページタイトル</h1>



<nav>

<h2>グローバルナビゲーション</h2>



<ul>

<li><a href="$$$dummy$$$.html">サービス</a></li>

<li><a href="$$$dummy$$$.html">実績紹介</a></li>

<li><a href="$$$dummy$$$.html">ナレッジ</a></li>

<li><a href="$$$dummy$$$.html">セミナー</a></li>

<li><a href="$$$dummy$$$.html">ニュース</a></li>

<li><a href="$$$dummy$$$.html">会社概要</a></li>

<li><a href="$$$dummy$$$.html">採用情報</a></li>

</ul>

</nav>

</header>



<main>

// メインコンテンツ



</main>



<footer>

<ul>

<li><a href="$$$dummy$$$.html">サービス</a></li>

<li><a href="$$$dummy$$$.html">実績紹介</a></li>

<li><a href="$$$dummy$$$.html">ナレッジ</a></li>

<li><a href="$$$dummy$$$.html">セミナー</a></li>

<li><a href="$$$dummy$$$.html">ニュース</a></li>

<li><a href="$$$dummy$$$.html">会社概要</a></li>

<li><a href="$$$dummy$$$.html">採用情報</a></li>

</ul>



<p><small>© Mitsue-Links Co.,Ltd.</small></p>

</footer>

</body>

使用可能な属性

  • 全てのグローバル属性

コンテンツカテゴリ

  • フローコンテンツ
  • セクショニングコンテンツ
  • パルパブルコンテンツ

子要素にしていい要素の種類

  • フローコンテンツ

親要素にしていい要素の種類

  • 子要素にフローコンテンツが期待されているすべての要素

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard

最終更新：2016年8月31日

一覧へ戻る

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

ミツエーリンクスのサービス一覧

関連情報