<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>, що typeатрибут 's опущено або встановлено на "toolbar". Дивіться специфікацію в <li>елементі і в <menu>елементі .
tomekwi

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

10

Ось HTML5Doctor публікаціяnav з розділом про те, чим він відрізняється від menu(в основному, використовувати його в фактичних додатках). Схоже, ти хочеш nav.



1

Найкраще місце для отримання цієї відповіді - це стандарти стандарту HTML 5.

Меню визначено в HTML 5.1, друге видання .

Він, "... являє собою групу команд."


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). Атрибут ролей переосмислює семантику за замовчуванням для будь-якого елемента.
brennanyoung
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.