Devo usare <ul> se <li> nei miei <nav>?

Il titolo lo spiega praticamente.

Ora che abbiamo un <nav>tag dedicato ,

È questo:

<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>

meglio di quanto segue?

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

Voglio dire, supponendo che non abbia bisogno di un livello DOM aggiuntivo per alcuni posizionamenti / padding CSS, qual è il modo preferito e perché?

l'elemento nav e l'elenco forniscono diverse informazioni semantiche:

• L'elemento nav comunica che abbiamo a che fare con un importante blocco di navigazione

• L'elenco comunica che i collegamenti all'interno di questo blocco di navigazione formano un elenco di elementi

Su http://w3c.github.io/html/sections.html#the-nav-element puoi vedere che un elemento nav potrebbe anche contenere prosa.

Quindi sì, avere un elenco all'interno di un elemento di navigazione aggiunge significato.

A questo punto, manterrei gli <ul><li>elementi, perché non tutti i browser supportano ancora i tag HTML5.

Ad esempio, ho riscontrato un problema utilizzando il <header>tag: Chrome e FF hanno funzionato a meraviglia, ma Opera ha funzionato.

Finché tutti i browser non supportano completamente l'HTML, li inserisco, ma mi affido a quelli vecchi per la compatibilità con le versioni precedenti.

Dipende davvero da te. Se di solito utilizzi un elenco non ordinato per contrassegnare il menu di navigazione, direi di continuare a farlo all'interno dell'elemento <nav>. Lo scopo dell'elemento <nav> è ad esempio identificare la navigazione del sito a un lettore di computer, quindi se si utilizza un elenco o semplicemente i collegamenti è irrilevante.

Per me, gli elenchi non ordinati sono markup extra che non sono realmente necessari. Quando guardo un documento HTML, voglio che sia il più pulito e facile da leggere possibile. È già chiaro al visualizzatore che viene presentato un elenco se viene utilizzato il rientro appropriato. Pertanto, l'aggiunta dell'UL a questi tag a non è necessaria e rende più difficile la lettura del documento.

Sebbene tu possa ottenere un po 'di flessibilità, credo che sia un'idea migliore non gonfiare il markup con classi ul non semantiche e modellare gli elementi a in un colpo solo. E non hai scuse: usa gli pseudo-selettori: before e: after.

Modifica : sono stato informato del fatto che alcuni screen reader ARIA trattano gli elenchi in modo diverso dai semplici anchor tag. Se il tuo sito web è rivolto a persone disabili, potrei prendere in considerazione l'utilizzo dell'approccio basato su elenchi.

No, sono equivalenti. Ricorda, HTML 5 è retrocompatibile con gli elenchi HTML 4, quindi puoi sentirti libero di usarli allo stesso modo. Il compromesso è meno codice per la seconda versione.

Se sei preoccupato per la retrocompatibilità rispetto ai browser, assicurati di includere questo shim per fornire funzionalità di tag come <nav>e <article>.

Se parliamo "secondo le regole", allora no; non è necessario utilizzare elenchi per contrassegnare la navigazione. L'unico vero vantaggio che offrono è quello di fornire un miglior grado di flessibilità durante lo styling.

Io terrei i <ul><li>tag, perché i nuovi tag ( <nav>, <section>, <article>e così via) sono solo le versioni più semantiche di <div>s.

Per lo stesso motivo per cui non avresti solo un carico di link in a <div>, dovrebbero anche essere strutturati all'interno di un <nav>tag.

C'è un post molto dettagliato su CSS Tricks su questa domanda esatta. Ovviamente è una questione molto dibattuta; il post ha oltre 200 commenti.

Navigazione negli elenchi: essere o non essere (CSS Tricks, gennaio 2013)