Czy powinienem używać <ul> i <li> w moich <nav>?

Tytuł właściwie to wyjaśnia.

Teraz, gdy mamy dedykowany <nav>tag,

Czy to jest:

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

lepiej niż poniższe?

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

To znaczy, zakładając, że nie potrzebuję dodatkowego poziomu DOM dla niektórych pozycji / dopełnień CSS, jaki jest preferowany sposób i dlaczego?

element nav i lista zawierają różne informacje semantyczne:

• Element nav informuje, że mamy do czynienia z głównym blokiem nawigacji

• Lista informuje, że łącza wewnątrz tego bloku nawigacji tworzą listę elementów

Na http://w3c.github.io/html/sections.html#the-nav-element widać, że element nav może również zawierać prozę.

Więc tak, posiadanie listy wewnątrz elementu nav dodaje znaczenia.

W tym momencie zachowałbym <ul><li>elementy, ponieważ nie wszystkie przeglądarki obsługują jeszcze tagi HTML5.

Na przykład napotkałem problem przy użyciu <header>tagu - Chrome i FF działały jak urok, ale Opera się zepsuła.

Dopóki wszystkie przeglądarki w pełni nie obsługują HTML, będę je umieszczać, ale polegam na starych, aby zapewnić kompatybilność wsteczną.

To naprawdę zależy od ciebie. Jeśli zwykle używasz nieuporządkowanej listy do oznaczania menu nawigacyjnego, powiedziałbym, że kontynuuj to w elemencie <nav>. Celem elementu <nav> jest identyfikacja nawigacji strony na przykład do czytnika komputera, więc to, czy korzystasz z listy, czy po prostu linków, nie ma znaczenia.

Dla mnie nieuporządkowane listy to dodatkowe znaczniki, które tak naprawdę nie są wymagane. Kiedy patrzę na dokument HTML, chcę, aby był tak czysty i łatwy do odczytania, jak to tylko możliwe. Dla widza już jest jasne, że lista jest prezentowana, jeśli zastosowano odpowiednie wcięcie. Zatem dodanie UL do tych znaczników jest niepotrzebne i utrudnia odczytanie dokumentu.

Chociaż możesz zyskać pewną elastyczność, uważam, że lepszym pomysłem jest nie nadużywanie znaczników niesemantycznymi klasami ul i stylizowanie elementów a za jednym zamachem. I nie masz wymówki: użyj pseudo-selektorów: before i: after.

Edycja : Zostałem poinformowany, że niektóre czytniki ekranu ARIA traktują listy inaczej niż zwykłe znaczniki kotwicy. Jeśli Twoja witryna jest przeznaczona dla osób niepełnosprawnych, mógłbym rozważyć zastosowanie podejścia opartego na liście.

Nie, są równoważne. Pamiętaj, że HTML 5 jest wstecznie kompatybilny z listami HTML 4, więc możesz swobodnie używać ich w tym samym zakresie. Kompromisem jest mniej kodu dla drugiej wersji.

Jeśli obawiasz się wstecznej kompatybilności z przeglądarkami, pamiętaj o dołączeniu tej podkładki, aby zapewnić funkcjonalność tagów, takich jak <nav>i <article>.

Jeśli mówimy „na podstawie książki”, to nie; nie musisz używać list do oznaczania nawigacji. Jedyną prawdziwą zaletą, jaką oferują, jest zapewnienie większego stopnia elastyczności podczas stylizacji.

Chciałbym zachować <ul><li>tagi, ponieważ nowe znaczniki ( <nav>, <section>, <article>i tak dalej) to tylko bardziej semantyczne wersje <div>s.

Z tego samego powodu nie miałbyś po prostu załadowania linków w tagu <div>, powinny one również mieć strukturę wewnątrz <nav>tagu.

W CSS Tricks jest naprawdę szczegółowy post dotyczący tego konkretnego pytania. Jest to oczywiście gorący temat; post ma ponad 200 komentarzy.

Nawigacja w listach: być albo nie być (CSS Tricks, styczeń 2013)