nav

Edit New

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 です >>8。 nav 要素専用の API はありません。

レンダリング

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

歴史

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

[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>

Updated: