HTML har tre listtyper, var och en med en semantisk betydelse. Att använda rätt lista hjälper till med tillgänglighet (skärmläsare meddelar "lista, 3 objekt") och struktur.
Oordnad lista — ordningen spelar ingen roll
Apples
Bananas
Cherries
HTML har tre listtyper, var och en med en semantisk betydelse. Att använda rätt lista hjälper till med tillgänglighet (skärmläsare meddelar "lista, 3 objekt") och struktur.
Apples
Bananas
Cherries
Renderas med punkter som standard. Använd för navigeringsmenyer, funktionslistor, taggar — vad som helst där sekvensen inte är meningsfull.
<ol type="1" start="1">
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 20 minutes</li>
</ol>
Renderas med siffror. Använd för steg, rankningar, instruktioner. Attribut: type (1, a, A, i, I), start (första nummer), 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> är termen, <dd> är dess beskrivning — utmärkt för ordböcker, metadata och nyckel/värde-par.
<nav>
<ul>
<li><a href="/">Home</a>
<ul><li><a href="/sub">Sub-page</a></li></ul> <!-- nested submenu -->
</li>
</ul>
</nav>
Navigeringsmenyer är konventionellt märkta som en <ul> inuti <nav>.
Listor är inte bara för punkter — de ger innehållet struktur som skärmläsare meddelar och som du kan utforma fritt (standardmarkörerna tas enkelt bort med CSS).
Valet mellan <ul> kontra <ol> kontra <dl> kommunicerar betydelse: oordnad, sekventiell eller term-definition.