2. modul · HTML alapok · 5. lecke
A lista az egyik legsokoldalúbb HTML-elem. Nemcsak felsorolásra való: menük, lépéssorok, termékrácsok, galériák — ezek mind listák a háttérben. Ha jól használod, a fél weboldalad ebből fog állni.
ul és mikor ol.<li>-be.A lista összetartozó elemek csoportja. Amikor listát használsz, azt mondod a böngészőnek: „ezek egy halmazt alkotnak, és ennyi darab van belőlük".
Három listafajta van, és mindegyiknek megvan a maga feladata:
| Elem | Neve | Mikor válaszd? |
|---|---|---|
<ul> |
Rendezetlen lista unordered list |
Ha a sorrend nem számít. Hozzávalók, tulajdonságok, menüpontok. |
<ol> |
Rendezett lista ordered list |
Ha a sorrend számít. Recept lépései, telepítési útmutató, toplista. |
<dl> |
Definíciós lista description list |
Ha név–érték párokat sorolsz. Fogalomtár, adatlap, GYIK. |
„Ha megkevernéd a sorrendet, elromlana a jelentés?"
<ol> (a recept lépéseit nem cserélheted fel)<ul> (a hozzávalókat igen)
Két elemből áll: a <ul> a lista kerete, a
<li> (list item) pedig egy-egy tétel.
<h2>Hozzávalók</h2> <ul> <li>1 kg burgonya</li> <li>6 tojás</li> <li>2 dl tejföl</li> <li>só, bors</li> </ul>
A <ul> közvetlen gyereke csak
<li> lehet. Ez hibás:
<ul> <p>Ez nem ide való!</p> <li>Ez rendben van</li> </ul>
Ha bekezdést akarsz a listában, tedd a <li>
belsejébe — erről a 7. pontban lesz szó.
Ugyanaz a felépítés, csak a keret más: <ol>. A tételek továbbra is
<li>-k.
<h2>Elkészítés</h2> <ol> <li>Főzd meg a burgonyát héjában.</li> <li>Hámozd meg és karikázd fel.</li> <li>Rétegezd a tepsibe.</li> <li>Süsd 30 percig 180 fokon.</li> </ol>
Soha ne gépeld be kézzel a számokat:
<ol> <li>1. Főzd meg a burgonyát.</li> <li>2. Hámozd meg.</li> </ol>
Az eredmény 1. 1. Főzd meg… lenne — dupla számozás. És ha beszúrsz egy
lépést, kézzel kellene átírni az összeset.
A rendezett listának három attribútuma van, amivel a számozást szabályozod.
| Attribútum | Mit csinál? |
|---|---|
type | A számozás jelkészlete: 1 (alap), A, a, I, i |
start | Melyik számtól induljon. Alapból 1-től. |
reversed | Visszafelé számozzon. Nincs értéke — elég leírni a nevét. |
<ol type="A"> <li>Első válasz</li> <li>Második válasz</li> </ol> <ol type="i" start="5"> <li>Ötödik pont</li> <li>Hatodik pont</li> </ol> <ol reversed> <li>Arany</li> <li>Ezüst</li> <li>Bronz</li> </ol>
reversed egy logikai attribútum: nincs
="valami" része. Ha ott van, érvényes; ha nincs ott, nem az.
Ilyenekkel az űrlapoknál is találkozol majd (required,
checked).
A type a megjelenést állítja, ami inkább CSS-feladat lenne
(list-style-type, 18. lecke). A szabvány mégis megengedi, mert néha a
számozásmód a tartalom része — például egy jogszabályban, ahol konkrétan a
„c) pontra" hivatkoznak.
A start és a reversed viszont
tartalmi, nem megjelenésbeli — azokat mindig itt add meg.
Ha egy hosszú listát megszakítasz — például beszúrsz közé egy képet vagy egy magyarázó bekezdést —,
a második <ol> újra 1-től indulna. A
start="6" viszi tovább a számozást.
Egy lista tartalmazhat másik listát — így készül a többszintű felsorolás. Egyetlen szabály van, és ezt szinte minden kezdő elrontja először.
A belső lista a <li> belsejébe kerül —
nem a <li> mellé, és nem a </li>
után. Gondolj bele: az alpont ahhoz a ponthoz tartozik, tehát benne van.
<ul>
<li>Gyümölcsök
<ul>
<li>Alma</li>
<li>Körte</li>
</ul>
</li>
<li>Zöldségek
<ul>
<li>Sárgarépa</li>
</ul>
</li>
<li>Tejtermékek</li>
</ul>
</li> helyét: a belső lista után
áll. A „Gyümölcsök" tétel tehát a szövegből és a hozzá tartozó alpontokból áll.
A böngésző a második szinten üres karikát használ — ez is csak alapértelmezés.
<ul>
<li>Gyümölcsök
<ul>
<li>Alma</li>
</ul>
</li>
</ul>
<ul>
<li>Gyümölcsök</li>
<ul>
<li>Alma</li>
</ul>
</ul>
A két változat a képernyőn majdnem ugyanúgy néz ki — ezért marad észrevétlen a
hiba. De a jobb oldali érvénytelen HTML: a <ul>
közvetlen gyereke csak <li> lehet.
Következmény: a validátor hibát jelez, a képernyőolvasó rosszul mondja be a szerkezetet, és CSS-sel is nehezebb lesz megcéloznod. Az, hogy „jól néz ki", nem jelenti azt, hogy jó.
Egy <ol>-ba tehetsz <ul>-t és
fordítva. Például: számozott főlépések, alattuk pontozott részletek. A szabály ugyanaz —
a belső lista mindig a <li>-n belül van.
<ol>
<li>Előkészítés
<ul>
<li>Melegítsd elő a sütőt</li>
<li>Vedd elő a hozzávalókat</li>
</ul>
</li>
<li>Sütés</li>
</ol>
Ez a harmadik, kevésbé ismert listafajta. Név–érték párokhoz való: fogalom és magyarázata, kérdés és válasza, adat és értéke.
| Elem | Mit jelent? |
|---|---|
<dl> | A lista kerete (description list) |
<dt> | A név, a fogalom (description term) |
<dd> | A hozzá tartozó leírás (description details) |
<dl>
<dt>HTML</dt>
<dd>Jelölőnyelv, ami az oldal
szerkezetét írja le.</dd>
<dt>CSS</dt>
<dd>Stílusnyelv, ami a megjelenést
határozza meg.</dd>
<dt>Böngésző</dt>
<dd>A program, ami a kódból
oldalt rajzol.</dd>
</dl>
dt balra igazítva, a
dd pedig behúzva jelenik meg. Ez az alapértelmezett
megjelenítés elég beszédes ahhoz, hogy CSS nélkül is használható legyen.
Nem kötelező az egy-az-egyhez párosítás. Egy dt-hez tehetsz több
dd-t (több jelentés), és több dt-hez
egyetlen dd-t (szinonimák).
<dt>kutya</dt> <dt>eb</dt> <dd>Háziasított ragadozó emlős.</dd>
Sokan azt hiszik, egy listaelem csak rövid szöveg lehet. Szinte bármit betehetsz egy
<li>-be: címsort, több bekezdést, képet, linket, táblázatot,
másik listát.
<ul>
<li>
<h3>Rakott krumpli</h3>
<p>Klasszikus magyar étel,
egyszerű hozzávalókból.</p>
<p><strong>Idő:</strong> 60 perc</p>
</li>
<li>
<h3>Lecsó</h3>
<p>Nyári kedvenc paprikából
és paradicsomból.</p>
<p><strong>Idő:</strong> 35 perc</p>
</li>
</ul>
Amikor egy weboldalon ismétlődő dolgok sorát látod — termékek, hírek, csapattagok,
képek —, az szinte biztosan egy <ul>, aminek minden
<li>-je egy elem. Nem azért, mert pontokat akarunk, hanem mert
tényleg egy lista.
| Hiba | Miért baj, és mi helyette? |
|---|---|
Kézzel beírt sorszámok <ol>-ban |
Dupla számozás lesz belőle. Hagyd a böngészőre — beszúrásnál magától újraszámoz. |
A beágyazott lista a </li> után |
Érvénytelen HTML, pedig jól néz ki. Tedd a <li> belsejébe, a záró tag elé. |
<p> közvetlenül a <ul>-ban |
A ul közvetlen gyereke csak li lehet. A bekezdés a li-be megy. |
<ul> csak azért, hogy behúzást kapj |
A behúzás CSS-feladat (margin, padding). Listát csak akkor használj, ha tényleg lista. |
<br> a listaelemek között |
Felesleges: a li amúgy is új sorban kezdődik. A térközt CSS-sel állítod. |
Elfelejtett </li> |
A böngésző kijavítja, ezért észrevétlen marad — de beágyazott listánál már látványosan elromlik. Formázz Shift+Alt+F-fel. |
Előbb válaszolj magadban, csak utána nézd meg a megoldást.
1. Egy recept hozzávalóit és elkészítési lépéseit írod le. Melyikhez milyen listát választasz és miért?
Hozzávalók → <ul>, mert a sorrendjük nem számít. Lépések → <ol>, mert ott a sorrend a jelentés része.
2. Mi a baj ezzel a kóddal?
<ul>
<li>Autók</li>
<ul>
<li>Opel</li>
</ul>
</ul>
A belső lista a <li> mellett van, nem benne. A <ul> közvetlen gyereke csak <li> lehet. Helyesen a belső <ul> az „Autók" tétel </li> záró tagja elé kerül. Csalóka, mert a képernyőn majdnem ugyanúgy néz ki.
3. Egy listát megszakítasz egy magyarázó bekezdéssel, majd folytatod. Hogyan éred el, hogy a számozás 7-tel folytatódjon?
A második listán: <ol start="7">.
4. Mi az a logikai attribútum, és melyiket láttad ebben a leckében?
Olyan attribútum, aminek nincs értéke: pusztán a jelenléte kapcsolja be. Ebben a leckében a reversed ilyen. Később még jön a required és a checked az űrlapoknál.
5. Termékadatlapot készítesz: Gyártó, Kijelző, Súly, Ár. Melyik listafajta illik ide?
Definíciós lista (<dl>): a tulajdonság neve <dt>, az értéke <dd>. Pontosan név–érték párokról van szó.
6. Egy navigációs menüt készítesz négy linkkel. Miért teszed listába ahelyett, hogy egymás mellé írnád a linkeket?
Mert a menüpontok egy összetartozó csoportot alkotnak, és ezt a jelentést a lista fejezi ki. A képernyőolvasó bemondja, hány elemű a lista, így a felhasználó tájékozódni és ugrani tud. Sima linkeknél ez az információ elveszne.
7. Szeretnél egy bekezdést kicsit beljebb húzni. Jó ötlet <ul>-be tenni?
Nem. A lista jelentést hordoz („ezek összetartozó tételek"), nem behúzóeszköz. A behúzás CSS-feladat: margin vagy padding.
<ul> = a sorrend nem számít · <ol> = a sorrend számít · <dl> = név–érték párok.<li>-k, és a ul/ol közvetlen gyereke csak li lehet.ol attribútumai: type (jelkészlet), start (kezdőérték), reversed (visszafelé).<li> belsejébe kerül, a záró tag elé. Ez a leggyakoribb listahiba.ol és a ul szabadon keverhető egymásba.dl–dt–dd hármas adatlapokhoz, GYIK-hez, fogalomtárhoz való.<li>-be szinte bármi belefér: címsor, bekezdés, kép, link, másik lista.