NAV

nav 要素 (HTML)

[22] nav は、文書中のナビゲーションリンクの部分を表します。

仕様書

意味

[17] nav 要素は、 ページ章節 (section) であって、 他のページや当該ページ内の各部分へとリンクするもの、 すなわちナビゲーションリンク (navigation link) 章節表現します >>8

[18] ページ内のリンク群をすべて nav 要素とする必要があるわけではありません。本要素は、 大きなナビゲーションブロック (major navigation block) 群から成る章節に使うことを主として意図しています。 >>8

[19] ページ尾部利用規約トップページ著作権ページなどへのリンクを並べる慣習がありますが、 その場合 footer 要素があれば十分で、 あえて nav 要素を併用しても問題はありませんが、 普通は要りません。 >>8

[21]章節」というと見出しが要るのではないかと考える人もいますが、 HTML の「章節」はより緩いもので、そうした制約はありません。 必要があれば見出しを置けますが、必要がないのに無理に含めなくても構いません。

HTML Standard にはどちらの利用例も示されています。

[23] 文書中の個数の制約はありませんし、文書中の他の部分との関係性の制約も特にありません。 ですから、例えば Webサイト全体のナビゲーションと文書内のナビゲーションで別の nav 要素としても構いませんし、文書の前半の部分と後半の部分で別の nav 要素に分かれていたりしても構いません。

[10] nav 要素は、次の分類に属します >>8

構文

[14] 開始タグ終了タグも必須です >>8

属性

[15] 大域属性を使うことができます >>8

内容

[12] フロー内容を使うことができます >>8

[13] ただし、 main 要素子孫とすることはできません >>8

[24] 内容をどう記述するかに制約はありません。 ul 要素を使ってリストとしてリンクを並べても構いませんし、 a 要素を「 | 」 のような区切りを使って並べたものでも構いません。

[25] リンクの個数の制約もありませんから、例えば文書中にリンク先となる章節がたまたま無い場合のように、 必然性があればリンクを含まない章節であっても構いません。

[26] フロー内容共通の制約で、触知可能内容子孫に原則として必要です。 原則なので、必然性があればにもできます。

文脈

[11] フロー内容を使える場所で使うことができます >>8

API

[16] 要素インターフェイスは、 HTMLElement です >>8nav 要素専用の API はありません。

レンダリング

[20] スクリーンリーダーその他の利用者エージェントは、 利用者に合わせて最初のレンダリングでナビゲーション情報を省いたり、 最初にナビゲーション情報を表示したりする方が良い場合、 どの部分が該当するか判定するために nav 要素を使えます >>8

歴史

[9] nav 要素は、 Web Applications 1.0 (後の HTML5、現在の HTML Standard) で追加されました。

[28] Web Applications 1.0, , https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/#specific

[104] HTML要素概説
要素名
navigation
日付
説明
Web Applications 1.0 に、 navigation がある。
出典

[1] Re: Fwd: idea for new tag: breadcrums (fwd) (Ian Hickson <ian@...> 著, 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/12270

[2] IRC logs: freenode / #whatwg / 20090803 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090803#l-238

[3] navigation という名前が提案されたこともありましたが、 短くて書きやすい nav要素名として選ばれました。

[4] XHTML2 ではナビゲーションのためのリストを表す nl 要素ナビゲーションであることを表す role 属性値 navigation が提案されていました。

[5] EMail Msg <9306290033.AA01399@austin.BSDI.COM> ( ( 版)) http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/672.html

[6] Web Applications 1.0 r8759 Add some examples of app-like usages to increase example variety ( ( 版)) http://html5.org/r/8759

[7] 年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に ( 版) http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html
        <nav class="main group">
    <!-- top nav bar -->
    <section class="verticals japan group"  data-beacon='{"p":{"mnid":"topnav_first_row","mlid":"topnav"}}'  >
        <ul class="verticals-ul">
            <li class="front-page toplevel"  data-beacon='{"p":{"lnid":"homepage"}}'  >
	                             <a class="toplevel-a" href="http://www.huffingtonpost.jp" title="Home" tabindex="1" class="link">FRONT PAGE</a>
		  	
            </li>

[27] Restrict the main element to be used once per document by annevk · Pull Request #3354 · whatwg/html () https://github.com/whatwg/html/pull/3354