Listák használata HTML-ben

A HTML listák segítségével felsorolásokat készíthetünk. Két fő típust különböztetünk meg: rendezetlen (unordered) és rendezett (ordered) listákat. Ezek struktúrát és áttekinthetőséget adnak a tartalomnak.

Rendezetlen lista (ul)

A <ul> taggel hozunk létre rendezetlen listát. Ez a fajta lista tipikusan pontokkal jelenik meg. Minden listaelemhez a <li> tagot használjuk.

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Cheese</li>
</ul>

Rendezett lista (ol)

A <ol> taggal hozunk létre rendezett listát, ahol a listaelemek számozva jelennek meg. A sorrend itt számít, például lépések, instrukciók esetén.

<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

Beágyazott listák

A HTML lehetőséget ad arra, hogy listákon belül további listákat helyezzünk el. Ez akkor hasznos, ha egy fő kategória alatt alkategóriákat is szeretnénk felsorolni.

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Mikor érdemes listát használni?

Bármikor, amikor felsorolást szeretnénk készíteni – legyen az tennivalók listája, alapanyagok, lépések vagy kategóriák – érdemes listát használni. Fontos, hogy a megfelelő típust válasszuk: ha a sorrend számít, akkor rendezett listát, ha nem, akkor rendezetlent.