HTML lista, felsorolás (HTML ol, ul, li)

A HTML nyelvben alapértelmezetten három különböző listát hozhatunk létre. Az első a rendezett, a második a rendezetlen, a harmadik pedig a definíciós lista.

Rendezett és rendezetlen lista szemléltető kép (HTML ol, ul, li)

HTML lista, felsorolás (HTML ol, ul, li)

A HTML lehetővé teszi, hogy különböző listákat alkossunk, hogy a kapcsolódó adatokat egybe rendezhessük. A felsorolások és a listák azért jók, mert átláthatóbbá teszik az információkat.

Milyen listákat alkothatunk HTML-ben?

A HTML nyelvben három különböző listát alkothatunk beépítetten. Az első a rendezett (azaz a számozott), a második a rendezetlen (vagyis a számozatlan lista), a harmadik pedig a definíciós lista. A rendezetlen listában csak felsoroljuk a lista elemeit, míg a rendezett listában sorrendbe is rendezzük őket és ezt egy emelkedő vagy csökkenő sorrenddel jelöljük is. A definíciós listában pedig egyes kifejezéseket magyarázunk meg listába építve.

Rendezett és rendezetlen lista szemléltető kép (HTML ol, ul, li)

Rendezetlen lista

Egy rendezetlen lista az <ul> elemmel indul és a zárópárjával zárul. A kettő közé mennek az úgynevezett listaelemek, amelyeket <li> és </li>-vel jelölünk. Az ul azt jelöli, hogy ez egy rendezetlen lista, mivel az ul, az angol unordered list szóból ered. A li az angol list item, azaz listaelem szóra utal. Szóval egy li elembe egy listaelemet írunk.

Rendezetlen lista szintaktikája

<ul>
   <li>Első listaelem</li>
   <li>Második listaelem</li>
   <li>Harmadik listaelem</li>
</ul>

Az ul elemmel meghatározzuk, hogy ez egy rendezetlen lista, majd a belsejében li elemekkel listaelemeket hozunk létre.

Példa rendezetlen listára

HTML kód

<ul>
   <li>Lista első eleme</li>
   <li>Lista második eleme</li>
   <li>Lista harmadik eleme</li>
</ul>

Eredmény

  • Lista első eleme
  • Lista második eleme
  • Lista harmadik eleme

A fenti példát elemezve láthatjuk, hogy az <ul> nyitó taggel nyitottunk egy rendezetlen HTML listát, melyben három darab <li></li>-t helyeztünk el, azaz a rendezetlen listánknak három darab listaeleme van. Majd végül természetesen lezártuk a rendezetlen listánkat egy </ul> zárótaggel.

Rendezett (számozott) lista

Egy rendezett lista annyiban tér el a rendezetlen listától, hogy itt nem <ul>-t használunk, hanem itt <ol>-t. Hiszen az ol az ordered list-re utal.

Rendezett (számozott) lista szintaktikája

<ol>
   <li>Első listaelem</li>
   <li>Második listaelem</li>
   <li>Harmadik listaelem</li>
</ol>

Az ol elemmel meghatározzuk, hogy ez egy rendezett lista, majd a belsejében li elemekkel listaelemeket hozunk létre.

Példa rendezett listára

HTML kód

<ol>
   <li>Lista első eleme</li>
   <li>Lista második eleme</li>
   <li>Lista harmadik eleme</li>
</ol>

Eredmény

  1. Lista első eleme
  2. Lista második eleme
  3. Lista harmadik eleme

Láthatjuk, hogy a rendezetlen lista HTML kódjához képest csak annyi változott, hogy az ul elemeket átírtuk ol elemekre. És így kaptunk egy növekvő számozású listát.

Fordított számozású lista

Ha szeretnénk megfordítani a számozást, akkor csak annyi a teendőnk, hogy ezt használjuk:

<ol reversed>

A reversed jelzi a böngészőnek, hogy itt egy fordított sorrendet kell alkalmazni a rendezett listán belül.

Példa fordított számozású listára

HTML kód

<ol reversed>
   <li>Lista első eleme</li>
   <li>Lista második eleme</li>
   <li>Lista harmadik eleme</li>
</ol>

Eredmény

  1. Lista harmadik eleme
  2. Lista második eleme
  3. Lista első eleme

Definíciós lista

Továbbá a HTML-ben létrehozhatóak úgynevezett definíciós listák is.
A definíciós lista arra szolgál, hogy egy kifejezést magyarázzon meg egy listába rendezve.

Definíciós lista szintaktikája

<dl>
  <dt>Fogalom</dt>
  <dd>Fogalom magyarázata</dd>
</dl>

A dl elemmel mondjuk meg, hogy definíció lista következik. A definíciós lista belsejében a dt elem jelöli a fogalmat, míg a dd a fogalom magyarázatát.

Példa definíciós lista alkalmazására

HTML kód

<dl>
  <dt>Definíciós lista</dt>
  <dd>Ez a magyarázat.</dd>
</dl>

Eredmény

Definíciós lista
Ez a magyarázat.

A fenti példában látszik, hogy a <dl> nyitótaggal meghatároztuk, hogy ez egy definíciós lista lesz. Majd létrehoztunk egy dt elemet, ahol megadtuk a fogalmat, majd lezártuk a </dt>-vel. Lentebb megnyitottuk a <dd>, hogy megadjuk a fogalom magyarázatát, majd ezt is lezártuk a </dd>-vel. Ezután az egész definíciós listát lezártuk egy </dl>-el.