<nav>または<menu>(HTML5)


102

W3Schools.comと私は<menu>、ツールバーメニューとリストフォームコントロールコマンドに使用する必要があるW3C.orgの状態を見たことを覚えていると思います。

では、メインメニューにはどちらを使用すればよいですか。Nav、またはMenu?それは重要ですか?


38
w3foolsを読みたいかもしれません。
zzzzBov

「フォーム制御コマンド」とは何ですか?
Mads Skjern 2014

回答:


162

nav内部リンク(a要素)のグループに使用されます。通常、これはリンクが別のページに移動するか、AJAXページの場合はコンテンツを変更する必要があることを意味します。navアイテムをクリックすると、ある種のコンテンツの変更が予想されます。

menu(コントロールのグループのために使用されますainputbutton)。通常、これは入力がページ内で機能を実行する必要があることを意味します。menuアイテムをクリックするとき、なんらかのJavaScriptの相互作用を期待してください。

nav:サイトのナビゲーション

menu:Webアプリケーションのメニュー


8
興味深い事実:この仕様では、リストを必要とせずに、タグの<li>直下に要素をネストできます。要件は、の属性が省略されているか、に設定されていることです。仕様を参照してください要素要素を<menu><ul><menu>type"toolbar"<li><menu>
tomekwi、2015年

誰か<menu>がW3C HTML5仕様の1つで私を指摘できますか?WHAT WGバージョンでは見つかりましたが、最新のW3C HTML 5.3ドラフトでは見つかりません。
ギャレットウィルソン

10

これは、HTML5Doctorの投稿でnav、それとの違いについてのセクションがありますmenu(基本的に、実際のアプリで使用します)。あなたが望むように見えますnav



1

この答えを得るのに最適な場所は、HTML 5標準そのものです。

メニューHTML 5.1 2nd Editionで定義されています

「...はコマンドのグループを表します。」


NavHTML 5で定義されています

それは、「...他のページまたはページ内のパーツにリンクするページのセクション:ナビゲーションリンクのあるセクション」です。

含めなかったが重要だと思うナビの注意事項がありますが、標準から自分で定義を取得するのが最善だと思います。

この投稿で回答としてマークされている定義はほぼ正しいですが、回答自体が間違っている無関係なステートメントが含まれています。


0

<nav>はセクション(<section>または<article>)であるため、HTMLドキュメントのアウトラインに表示されます。このため、<menu>99%の時間を使用します。私には、<nav>間に混在している<section><menu>追加の狭窄で、<nav>一方、ナビゲーションのために特別に使用されるべきです<menu>(ナビゲーションバーなど)のメニューと呼ばれるかもしれない何のためにすることができます。したがって、ほとんどのナビゲーションバーは、ナビゲーションバーであるにもかかわらず、の厳密な要件に適合せず<nav><menu>より適切です。

私はWeb開発のキャリアの中で、ナビゲーションバーをドキュメントのアウトラインの一部にしたいと思った状況を発見したことがありません。


1
これは誤りです。あなたはすべきことは稀(これまでの場合)使用<menu>時間の99%、自分のナビゲーション「メニュー」は何であるページ、上の他のページや他のセクションへの静的なリンクになります-ウェブアプリではありませんウェブサイト上<nav>のためである、従っ仕様に。
Ivan Durst、2015年

@IvanDurst、私のポイントは、静的リンクのリストを単に作成している場合は、セクション要素であるため、navタグの選択としては適切ではなくnav、ヘッダーとコンテンツを含むセクションのようにドキュメントアウトラインの一部になることです。これは実際にはnav、セクションのように振る舞うことを望むまれなシナリオです。menuセマンティックの代替としての提案にすぎません。このように使用できないという仕様には何も見当たらない。合うようです。しかし、何らかの理由でメニューがWebアプリとして定義されているものだけであると思われるol場合ulは、代替品としてお勧めします。
Nick Manning

適合表によると、ここで<menu>まだこの時点では貧しいサポートしています。(Chromeがサポートしていないのは本当ですか?)また、role="menu"別の要素(divやnavなど)に属性を指定することで、まったく同じセマンティクスを実現できます。role属性は、要素のデフォルトのセマンティクスをオーバーライドします。
brennanyoung 2018年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.