HTML5 Listák és új attribútumok
Többen jeleztétek, hogy a listák és az ahhoz kapcsolódó változások kimaradtak az eddigiekből. Ezzel a cikkel szeretném ezt az űrt megszüntetni. Véleményem szerint itt kevesebb változás történt a HTML4-hez képest. Szinte teljesen hasonlóan hozhatóak létre számozott (<ol> … <li>) és számozatlan (<ul>…<li>) listák, vagy esetleg vegyes listák.
A HTML nyelvben eddig is volt lehetőségünk listák készítésére, nézzünk erre egy egyszerű példát.
Számozatlan lista felépítése:
<ul> <li>Budapest</li> <li>Pécs</li> </ul>

Számozott lista felépítése:
<ol> <li>Budapest</li> <li>Pécs</li> </ol>

<ol> <li>Nagyvárosok <ol> <li>Budapest</li> <li>Pécs</li> </ol> </li> <li>Kisvárosok <ul> <li>Mohács</li> <li>Bóly</li> </ul> </li> </ol>

Nézzük milyen attribútumai lehetnek a listaelemeknek:
Az <ul> esetében csak a globális nem lista specifikus attribútumok jöhetnek szóba, tehát ezekkel nem foglalkozunk.
Az <ol> esetében pedig három attribútum közül választhatunk (ebből 1 új), melyek a következők:
– start – <ol start=”50″> Számozás kezdő sorszámát határozhatjuk meg a segítségével.
– type – <ol type=”I”> Megadhatjuk, hogy milyen jellegű legyen a sorozatunk, ennek értékei lehetnek:
1 sorszám (ez az alapértelmezett) (1, 2, 3, 4)
a abc sorrend, növekvő (a, b, c, d)
A abc sorrend, növekvő (A, B, C, D)
i római számok (i, ii, iii, iv)
I római számok (I, II, III, IV)
– reversed – <ol reversed=”reversed”> Csökkenő számozás.. pl. 5,4,3,2,1
Sajnos ez utóbbit jelenleg az általam próbált böngészők egyike sem támogatta, így a következő példa 3. része jelenleg nem fordított sorrendű.
Holott nem feltétlenül gondolom, hogy ennek a supportja egy rettentő komplex, már már szinte a leprogramozhatatlanság határát súroló feladat volna. De még messze a végleges szabvány kiadása, így reméljük nem felejtik ki.
Az <li> esetében egy attribútum áll rendelkezésre, amely a következő:
– value – <li value=”3″> megadhatjuk vele manuálisan a lista értékét, sorszámát.
A fentiekre itt egy egyszerű szörpös példa, ahol mindegyik attribútumra találtok egy példát.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Listák alapfokon</title> </head> <body> <ol> <li>Kávé</li> <li>Szörp</li> <li>Tej</li> </ol> <ol start="100"> <li>Kávé</li> <li>Szörp</li> <li>Tej</li> </ol> <ol reversed> <li>Kávé</li> <li>Szörp</li> <li>Tej</li> </ol> <ol type="I"> <li>Kávé</li> <li>Szörp</li> <li>Tej</li> </ol> <ol> <li value="3">Kávé</li> <li value="2">Szörp</li> <li value="1">Tej</li> </ol> </body> </html>
A példa itt megtekinthető, letölthető.
Ha bármi kérdésetek, véleményetek, kérésetek van nyugodtan írjatok.
Forrás:
http://www.w3.org/TR/html5/grouping-content.html#the-ol-element

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.