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


114

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


Questa è una buona domanda ... Con tag che non hanno senso per HTML 4, si applicano le migliori pratiche precedenti?
Guffa

Risposte:


63

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.


Grazie mille, questo è quello di cui avevo bisogno! Inoltre, il commento di robertc sugli screen reader che annunciavano "elenco di 3 elementi" di seguito è stato molto utile.
kikito

7
Sembra che il tag UL non aiuti nulla: css-tricks.com/navigation-in-lists-to-be-or-not-to-be
psycho brm

2
Il collegamento sembra funzionare per me. Assicurati di leggere il seguito, che dichiara le liste e nessuna lista un pareggio. css-tricks.com/wrapup-of-navigation-in-lists
RobW

A mio parere, un <nav>senza <ul><li>sembra avrà menu per bambini più dinamici. Cosa succede se si hanno più elenchi di menu che sono di tipo e posizionamento diversi nella <nav>? Raggrupperei quegli elenchi di menu come <ul><li>nel file <nav>. Quindi, se i tuoi menu sono regolari, vorrei andare con <ul><li>.
wonsuc

3

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.


3
Usa il file javascript HTML 5 Shim ( remysharp.com/2009/01/07/html5-enabling-script ) per mitigare eventuali errori di compatibilità all'indietro con browser come Opera e IE.
acconrad

Ma poi il tuo sito non è favorevole allo scripting non invadente :)
Demian Brecht

1
Intendi dire che fino a quando IE8 non uscirà dal mercato ... così come fino al 2016 ...:)
Šime Vidas

@ Šime - precisamente :) E disattivare Javascript non è più un'opzione nei browser;)
Demian Brecht

@ Agent_9191 lo farà - Sono completamente sorpreso oggi quando volevo solo controllare quante persone sono ancora su IE7 e indovina un po '- nella maggior parte dei paesi ci sono più persone su browser come Opera o iPad Safari che in IE7. Sono così felice di poter abbandonare il supporto per IE7 ora! E IE8 prima o poi sparirà. È l'ultimo browser ostinato che dovremo affrontare (IE9 non è poi così male da codificare).
Camilo Martin

2

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.


+1 a causa di ricordare che per gli screen reader, navS e as sono altrettanto buono come liste ora.
Camilo Martin

2

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.


1

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


8
Un elenco di collegamenti fornisce semantica e accessibilità aggiuntive (ad esempio, i lettori di schermo annunceranno "Elenco di tre elementi" quando si accede alla navigazione).
robertc

@robertc Il punto degli screenreaders è molto buono. Avresti dovuto metterlo in una risposta! Lo avrei contrassegnato come corretto. +1 in ogni caso.
kikito

1

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.


1

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.


Il motivo per cui ho usato <ul> s invece di molti link in un <div> in passato era precisamente che <ul> s erano più semantici. Ma ora le <nav> sono più semantiche. Non ho capito bene.
kikito

2
Gli <ul> sono ancora più semantici dei semplici collegamenti <a>, ma <nav> è più semantico di <div>. <ul> vs <a> è separato da <nav> vs <div>
whostolemyhat

Non preoccuparsi della semantica non è la strada da percorrere quando si scrive HTML.
Andrew Marshall,

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.