<nav> lub <menu> (HTML5)

102

W3Schools.com i jestem prawie pewien, że pamiętam stan W3C.org, który <menu>powinien być używany do menu paska narzędzi Toolbar i wyświetlania poleceń sterujących formularzami.

Więc którego z nich powinienem użyć w menu głównym? Navlub Menu? Czy to ma znaczenie?

— Slipp D. Thompson
źródło

38

Możesz przeczytać w3fools .

— zzzzBov,

Co to jest „polecenie kontroli formularza”?

— Mads Skjern

162

navsłuży do grup linków wewnętrznych ( aelementów). Ogólnie oznacza to, że linki powinny prowadzić do oddzielnych stron lub zmieniać zawartość w przypadku strony AJAX. Spodziewaj się zmiany treści po kliknięciu navelementu.

menustosuje się dla grupy kontrolnej ( a, input, button). Ogólnie oznacza to, że dane wejściowe powinny pełnić funkcję na stronie. Po kliknięciu menuelementu spodziewaj się interakcji w języku JavaScript .

nav: nawigacja w witrynie.

menu: menu aplikacji internetowej.

— zzzzBov
źródło

8

Ciekawostka: specyfikacja pozwala na zagnieżdżanie <li>elementów bezpośrednio pod <menu>tagiem, bez konieczności tworzenia <ul>listy. Wymagane jest, <menu>aby typeatrybut ' został pominięty lub ustawiony na "toolbar". Patrz specyfikację do <li>elementu i do <menu>elementu .

— tomekwi

Czy ktoś może wskazać mi <menu>jedną ze specyfikacji W3C HTML5? Znajduję to w wersji WHAT WG , ale nie w najnowszej wersji roboczej W3C HTML 5.3 .

— Garret Wilson

10

Oto post HTML5Doctornav z sekcją o tym, czym różni się od menu(w zasadzie używaj go w rzeczywistych aplikacjach). Wygląda na to, że chcesz nav.

— Su '
źródło

1

Dzięki <menu>temu jest zwykle używany w menu kontekstowych.

MDN ma na ten temat dobrą dokumentację: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu

— Jacek
źródło

1

Najlepszym miejscem na uzyskanie tej odpowiedzi są standardy HTML 5.

Menu jest zdefiniowane w HTML 5.1 2nd Edition .

To „… reprezentuje grupę poleceń”.

Nav jest zdefiniowany w HTML 5 .

Jest to „... sekcja strony, która zawiera linki do innych stron lub części strony: sekcja z linkami nawigacyjnymi”.

Są notatki dotyczące nawigacji, których nie uwzględniłem, ale uważam, że są ważne, ale myślę, że najlepiej będzie, jeśli samodzielnie uzyskasz definicję ze standardów.

Definicje zaznaczone w tym poście jako odpowiedź są bliskie poprawności, ale zawierają obce stwierdzenia, które powodują, że sama odpowiedź jest błędna.

— kevin
źródło

0

<nav>jest sekcją (na przykład <section>lub <article>), więc pojawi się w konspekcie dokumentu HTML. Z tego powodu wykorzystałbym <menu>99% czasu. Dla mnie <nav>jest to połączenie <section>i <menu>, z dodatkowym ograniczeniem, które <nav>powinno być używane specjalnie do nawigacji, podczas gdy <menu>może dotyczyć wszystkiego, co można nazwać menu (w tym paskiem nawigacyjnym). Dlatego większość pasków nawigacyjnych, mimo że są paskami nawigacyjnymi, nie spełnia rygorystycznych wymagań <nav>i <menu>jest bardziej odpowiednia.

Nigdy w swojej karierze programistycznej nie znalazłem sytuacji, w której chciałbym, aby pasek nawigacji był częścią konspektu dokumentu.

— Nick Manning
źródło

1

To jest niepoprawne. Należy rzadko (jeśli w ogóle) użycie <menu>na stronie internetowej, że nie jest to aplikacja internetowa - 99% czasu, Twoja nawigacja „menu” będzie statyczne linki do innych stron lub innych sekcji na stronie, która jest, co <nav>jest, według do specyfikacji.

— Ivan Durst

@IvanDurst, chodzi mi o to, że jeśli tworzysz po prostu listę statycznych linków, navnie jest to dobry wybór tagów, ponieważ navjest to element sekcji, więc stanie się częścią konspektu dokumentu, jakby była to sekcja z nagłówkiem i treścią. W rzeczywistości jest to rzadki scenariusz, w którym chcesz, abyś navzachowywał się jak sekcja. menubyła tylko sugestią jako zamiennik semantyczny. Nie widzę w specyfikacji nic, co mówi, że nie można go używać w ten sposób. Wydaje się pasować. Ale jeśli z jakiegoś powodu uważasz, że menu jest tylko tym, co określasz jako aplikację internetową, polecam ollub uljako zamiennik.

— Nick Manning

Zgodnie z zamieszczoną tutaj tabelą zgodności , <menu>nadal ma słabe wsparcie. (Czy to prawda, że Chrome nie obsługuje tego?). Możesz również osiągnąć dokładnie tę samą semantykę, podając role="menu"atrybut innemu elementowi (np. Div lub nav). Atrybut role zastępuje domyślną semantykę dowolnego elementu.

— brennanyoung