HTML ha tre tipi di lista, ognuno con un significato semantico. Usare quello giusto aiuta l'accessibilità (i lettori di schermo annunciano "lista, 3 elementi") e la struttura.
Unordered list — l'ordine non importa
html
Apples
Bananas
Cherries
HTML ha tre tipi di lista, ognuno con un significato semantico. Usare quello giusto aiuta l'accessibilità (i lettori di schermo annunciano "lista, 3 elementi") e la struttura.
Apples
Bananas
Cherries
Esegue il rendering con i puntini per impostazione predefinita. Usa per menu di navigazione, elenchi di funzionalità, tag — qualsiasi cosa dove la sequenza non sia significativa.
<ol type="1" start="1">
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 20 minutes</li>
</ol>
Esegue il rendering con numeri. Usa per step, classifiche, istruzioni. Attributi: type (1, a, A, i, I), start (primo numero), reversed.
<dl>
<dt>HTML</dt>
<dd>The markup language for web pages.</dd>
<dt>CSS</dt>
<dd>The styling language for web pages.</dd>
</dl>
<dt> è il termine, <dd> la sua descrizione — ottimo per glossari, metadati e coppie chiave/valore.
<nav>
<ul>
<li><a href="/">Home</a>
<ul><li><a href="/sub">Sub-page</a></li></ul> <!-- nested submenu -->
</li>
</ul>
</nav>
I menu di navigazione sono convenzionalmente marcati come <ul> all'interno di <nav>.
Le liste non sono solo per i puntini — forniscono struttura al contenuto che i lettori di schermo annunciano e che puoi stilizzare liberamente (i marcatori predefiniti si rimuovono facilmente con CSS).
Scegliere <ul> vs <ol> vs <dl> comunica significato: non ordinato, sequenziale o termine-definizione.