Edit

Page

Page title:

Page body:

[22] [DFN[[CODE(HTMLe)@en[[[nav]]]]]] は、[[文書]]中のナビゲーションリンクの部分を表します。

* 仕様書

[REFS[
- [8] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-01-14 18:28:51 +09:00]] 版) <https://html.spec.whatwg.org/#the-nav-element>
]REFS]

* 意味

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

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

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

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

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

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

[10] [CODE(HTMLe)@en[[[nav]]]] [[要素]]は、次の分類に属します [SRC[>>8]]。
[FIG(short list)[
- [[フロー内容]]
- [[章節付け内容]]
- [[触知可能内容]]
]FIG]

* 構文

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

* 属性

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

* 内容

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

[13] ただし、 [CODE(HTMLe)@en[[[main]]]] [[要素]]を[[子孫]]とすることはできません
[SRC[>>8]]。

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

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

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

* 文脈

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

* API

[16] [[要素インターフェイス]]は、 [CODE(DOMi)@en[[[HTMLElement]]]] です [SRC[>>8]]。
[CODE(HTMLe)@en[[[nav]]]] [[要素]]専用の [[API]] はありません。

* レンダリング

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

* 歴史

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

[28] [CITE@en-GB-hixie[Web Applications 1.0]], [TIME[2024-09-01T08:44:52.000Z]], [TIME[2004-12-10T06:02:35.522Z]] <https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/#specific>

[FIG(data)[ [104] [[HTML要素概説]]

:[F[要素名]]:[CODE[navigation]]
:日付:[TIME[2004-09-23]]
:説明:
[TIME[2004-09-23]]版
[CITE@en-GB-hixie[Web Applications 1.0]]
に、
[CODE[navigation]]
がある。
:出典:
[REFS[

-
[CITE@en-GB-hixie[Web Applications 1.0]], 
[DATA(.author)[[[WHATWG]]]],
[[Ian Hickson]],
[DATA(.status)[[[Working Draft]]]],
[TIME(.published)[8 December 2004][2004-12-08]],
[TIME[2024-09-01T08:36:36.000Z]], [TIME[2004-12-10T05:54:20.058Z]] <https://web.archive.org/web/20041210054847/http://www.whatwg.org/specs/web-apps/current-work/>

]REFS]

]FIG]

[1]
[CITE[Re: Fwd: idea for new tag: breadcrums (fwd)]] ([[Ian Hickson <ian@...>]] 著, [TIME[2007-10-31 00:10:06 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/12270>

[2] [CITE[IRC logs: freenode / #whatwg / 20090803]]
([TIME[2009-10-04 14:33:21 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20090803#l-238>

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

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

[5] [CITE[EMail Msg <9306290033.AA01399@austin.BSDI.COM>]]
( ([TIME[2008-03-15 05:24:34 +09:00]] 版))
<http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/672.html>

[6] [CITE@en[Web Applications 1.0 r8759 Add some examples of app-like usages to increase example variety]]
( ([TIME[2014-09-12 08:01:00 +09:00]] 版))
<http://html5.org/r/8759>

[FIG(quote)[
[FIGCAPTION[
[7] [CITE@ja[年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に]]
([TIME[2015-12-31 14:23:44 +09:00]] 版)
<http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html>
]FIGCAPTION]

>
[PRE(code)[
        <nav class="main group">
    
    <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>
]PRE]
]FIG]

[27] [CITE@en[Restrict the main element to be used once per document by annevk · Pull Request #3354 · whatwg/html]]
([TIME[2018-01-24 12:50:47 +09:00]])
<https://github.com/whatwg/html/pull/3354>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)