Contenuto tag nav HTML5

Sembra che vi siano esempi contraddittori nei documenti relativi al tag <nav> in html5. La maggior parte degli esempi che ho visto usare questo:Contenuto tag nav HTML5

<nav> 
    <ul> 
    <li><a href='#'>Link</a></li> 
    <li><a href='#'>Link</a></li> 
    <li><a href='#'>Link</a></li> 
    </ul> 
</nav>

ma mi chiedo se questo è solo perché la gente è abituata ad usare div. Ci sono esempi che ho visto che lo fanno semplicemente

<nav> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
</nav>

Il secondo modo sembra più pulito e più semantico per me. Esiste una versione corretta "ufficiale"? C'è una buona ragione per utilizzare ancora uno <ul> all'interno del tag nav invece di utilizzare direttamente gli elementi di ancoraggio?

fonte

2011-09-01 Falmarri

Entrambi gli esempi sono semantici.

Nel primo esempio, l'elenco di ancore è esplicitamente un elenco non ordinato. Nel secondo esempio, l'elenco di collegamenti è solo una raccolta di elementi di ancoraggio.

Se si desidera semplicemente una raccolta unidimensionale di link, vi consiglio di attaccare con

<nav> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
</nav>

tuttavia, utilizzando ul elementi permette di menu gerarchici espliciti (come elenchi a discesa o alberi liste):

<nav> 
    <ul> 
    <li> 
     <a href="#">Link</a> 
    </li> 
    <li> 
     <a href="#">Link</a> 
     <ul> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Link</a> 
    </li> 
    <li> 
     <a href="#">Link</a> 
     <ul> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</nav>

fonte

2011-09-01 22:15:28 zzzzBov

La prima versione è migliore per gli screen reader (non ricordo la sorgente in questo momento). – Teetrinker

@Teetrinker, il primo è un elenco, il secondo è un albero. Né è * migliore * per i lettori di schermo perché trasmettono significati completamente diversi. Se intendi trasmettere un albero, il primo sarebbe inaccettabile. – zzzzBov

L'argomento era che uno screen reader legge: "navigazione/elenco/primo elemento/collegamento a A/secondo elemento/collegamento a B .." rispetto a "navigazione/collegamento a A/collegamento a B ..." Io totalmente ottieni il tuo punto con l'albero. – Teetrinker

L'unica vera differenza potrebbe essere il modo in cui i motori di ricerca potrebbero guardare i collegamenti. Quando in una lista non ordinata, Google potrebbe ad esempio comprendere che tutti gli elementi in tale elenco sono correlati. Nel secondo esempio Google potrebbe anche presumere che nessuno dei collegamenti sia correlato. Google può utilizzare tali informazioni per indicizzare e visualizzare le tue informazioni in modo più accurato.

Possono visualizzare lo stesso, ma in realtà un sacco di markup riguarda il modo in cui le informazioni devono essere presentate se non vi era alcuno stile allegato alla pagina o se un bot sta cercando nel tuo sito web informazioni rilevanti.

fonte

2011-09-01 22:19:13 Caimen

Google o ovunque menziona l'elemento che in realtà ha un significato e l'ha interpretato come dici tu? – Lukas

@ djlukas777 Google non rivela molto di ciò che googlebot fa per ovvi motivi, ma è chiaro che a googlebot interessa il markup semantico. Capire quale markup semantico è davvero la chiave per comprendere googlebot. Le liste vanno nei tag degli elementi della lista, Google quindi capisce che sta guardando una lista. Se si tratta di un tag di paragrafo, Google sa che è un paragrafo.Usa i tag giusti nei posti giusti e googlebot ti piacerà. Usa i tag di paragrafo per qualcosa di diverso dai paragrafi, quindi googlebot non ti piacerà. – Caimen

ok, immagino che sia chiaro per me :) molto per la tua risposta – Lukas

È possibile utilizzare entrambi.

Un elenco tende solo a essere utilizzato come elenco di collegamenti in genere solo questo, un elenco. Ma dipende da te.

fonte

2011-09-02 08:45:33

Non c'è alcuna differenza reale tra di loro. Tuttavia, come ha detto Caimen, i motori di ricerca utilizzano il markup della pagina per raggruppare i dati per migliorare i risultati della ricerca web. Ti consiglio di utilizzare il primo se i link sono abbastanza simili per argomento (ad esempio per un blog) e il secondo se i link non sono così simili (per la navigazione dei risultati da una ricerca sul sito web).

fonte

2011-09-02 09:19:48 deztructicus

Contenuto tag nav HTML5

risposta

Problemi correlati