<nav> или <menu> (HTML5)


102

W3Schools.com, и я почти уверен, что помню, как видел состояние W3C.org, которое <menu>следует использовать для меню панели инструментов и списков команд управления формой.

Итак, какой из них я должен использовать для своего главного меню? Nav, или Menu? Это имеет значение?


38
Вы можете прочитать w3fools .
zzzzBov

Что такое «команда управления формой»?
Mads Skjern

Ответы:


162

navиспользуется для групп внутренних ссылок ( aэлементов). Обычно это означает, что ссылки должны переходить на отдельные страницы или изменять содержимое в случае страницы AJAX. Ожидайте какого-то изменения содержимого при нажатии на navэлемент.

menuиспользуется для групп управления ( a, input, button). Обычно это означает, что входные данные должны выполнять функцию на странице. Ожидайте какого-то взаимодействия с javascript при нажатии на menuэлемент.

nav: навигация по сайту.

menu: меню для веб-приложения.


8
Интересный факт: спецификация позволяет вкладывать <li>элементы непосредственно под <menu>тег, без необходимости в <ul>списке. Требование состоит в том, что атрибут <menu>'s typeне указан или установлен в "toolbar". Смотрите спецификацию в <li>элементе и в <menu>элементе .
tomekwi

Может ли кто-нибудь указать мне на <menu>одну из спецификаций W3C HTML5? Я нахожу его в версии WHAT WG , но не в последнем проекте W3C HTML 5.3 .
Гаррет Уилсон

10

Вот пост HTML5Doctornav с разделом о том, чем он отличается от menu(в основном, использовать его в реальных приложениях). Похоже, ты хочешь nav.



1

Лучшее место, чтобы получить этот ответ, - это сами стандарты HTML 5.

Меню определено в HTML 5.1 2nd Edition .

Это «... представляет собой группу команд».


Nav определяется в HTML 5 .

Это «... раздел страницы, который ссылается на другие страницы или части страницы: раздел со ссылками для навигации».

Есть примечания для навигации, которые я не включил, но считаю важными, но я думаю, что вам лучше получить определение самостоятельно из стандартов.

Определения, отмеченные в этом посте как ответ, близки к правильным, но содержат посторонние утверждения, которые делают сам ответ неправильным.


0

<nav>- это раздел (например, <section>или <article>), поэтому он появится в структуре вашего HTML-документа. Из-за этого я бы использовал <menu>99% времени. Для меня <nav>это сочетание <section>и <menu>с добавленным ограничением, которое <nav>следует использовать специально для навигации, тогда как <menu>может быть для всего, что можно назвать меню (включая панель навигации). Поэтому большинство панелей навигации, несмотря на то, что они являются панелями навигации, не соответствуют строгим требованиям <nav>и <menu>являются более подходящими.

Я никогда в своей карьере веб-разработчика не встречал ситуации, когда я хотел бы, чтобы моя панель навигации была частью структуры документа.


1
Это неверно. Вам следует редко (если вообще когда-либо) использовать <menu>на веб-сайте, который не является веб-приложением - в 99% случаев ваше «меню» навигации будет представлять собой статические ссылки на другие страницы или другие разделы на странице, для чего <nav>, согласно к спец.
Иван Дерст

@IvanDurst, я хочу сказать, что если вы создаете просто список статических ссылок, navэто не лучший выбор тега, потому что navэто элемент раздела, поэтому он станет частью структуры документа, как если бы это раздел с заголовком и содержимым. На самом деле это редкий сценарий, когда вы хотите, чтобы вы navдействовали как секция. menuбыло просто предложением как смысловой заменой. Я не вижу ничего в спецификации, что это нельзя использовать таким образом. Кажется, подходит. Но если вы по какой-то причине считаете, что меню предназначено только для того, что вы определяете как веб-приложение, я рекомендую olили ulв качестве замены.
Ник Мэннинг,

Согласно приведенной здесь таблице совместимости , <menu>в настоящее время все еще имеет плохую поддержку. (Неужели это правда, что Chrome не поддерживает его?) Кроме того, вы можете достичь той же семантики, предоставив role="menu"атрибут другому элементу (например, div или nav). Атрибут role переопределяет семантику по умолчанию для любого элемента.
brennanyoung
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.