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.

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>
Code language: HTML, XML (xml)

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

<ul>
   <li>Lista első eleme</li>
   <li>Lista második eleme</li>
   <li>Lista harmadik eleme</li>
</ul>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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

<ol>
   <li>Lista első eleme</li>
   <li>Lista második eleme</li>
   <li>Lista harmadik eleme</li>
</ol>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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

<ol reversed>
   <li>Lista első eleme</li>
   <li>Lista második eleme</li>
   <li>Lista harmadik eleme</li>
</ol>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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

<dl>
  <dt>Definíciós lista</dt>
  <dd>Ez a magyarázat.</dd>
</dl>
Code language: HTML, XML (xml)

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.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!