HTML5 Listák és új attribútumok

by Szabó Viktor · Published 2012/03/29 · Updated 2016/10/22

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>

Vagy lehetőségünk van ezeket tetszőlegesen kombinálni:

<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