chevron-left chevron-right

Piotr Nalepa Frontend, architecture and AI

[HTML5] Lista numerowana – jakie są nowe możliwości?

This version
blog.piotrnalepa.pl/2012/02/27/html5-lista-numerowana-jakie-sa-nowe-mozliwosci
Published
Author
, Staff Software Engineer
Category
HTML5
Feedback
Write to me · Post on X

This post is 14 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.

Wraz z wdrożeniem specyfikacji HTML5 do przeglądarek internetowych powstało wiele nowych znaczników HTML oraz wiele z nich obudowano w nowe możliwości. Jednym z takich znaczników, którego możliwości zostały rozbudowane, jest znacznik <ol>.
Co ciekawe, powróciło część rzeczy porzuconych wraz ze specyfikacją HTML 4.01.

Section 1Znacznik <ol> i jego nowe atrybuty

Znacznik listy numerowanej wzbogacił się o 4 nowe atrybuty: type, start, value i reverse. Praktycznie wszystkie są wspierane przez nowoczesne przeglądarki, ale co ciekawe teoretycznie najgorzej wypada implementacja atrybutu reverse, co dla mnie jest mało zrozumiałe.

Section 1.1Atrybut: type

Atrybut ten jest odpowiedzialny za definiowanie stylu listy i ma on znaczenie semantyczne dla całego dokumentu HTML5. Takie podejście może powodować pewne zamieszanie w związku z tym, że dotychczas listy można było stylować za pomocą języka CSS. Nic w tej kwestii się nie zmienia. Można dalej stosować style CSS z powodzeniem. Jednak należy pamiętac o tym, że atrybut type będzie działał dla listy która nie ma zdefiniowanych stylów CSS.

Pytanie więc, gdzie można stosować ten nowy atrybut zgodnie ze standardami?
Zaleca się jego stosowanie w dokumentach technicznych i prawniczych, gdzie numeracja ma znaczenie szczególne.

Atrybut type może przyjąć 5 wartości:

type="1" domyślny styl numeracji za pomocą cyfr arabskich
type="a" numeracja za pomocą małych liter
type="A" numeracja za pomocą dużych liter
type="i" numeracja za pomocą małych cyfr rzymskich
type="I" numeracja za pomocą dużych cyfr rzymskich

Section 1.2Atrybuty: start i value

Pierwszy z wyżej wymienionych atrybutów jest odpowiedzialny za określenie numeru od ktorego zacznie się numeracja danej listy numerycznej. Może to być szczególnie użyteczne w przypadku, gdy zależy nam na rozbiciu listy na mniejsze kawałki bez utraty ciągłości numeracji. Jest on przypisywany do znacznika <ol>.

Atrybut value jest bardzo podobny w działaniu do atrybutu start, lecz jest przypisywany do znacznika <li>. Dzięki temu, można łamać ciągłośc numeracji w dowolnym miejscu. Osobiście, nie do końca rozumiem sens stosowania tego atrybutu (value).

Example 1HTML
1
2
3
4
5
<ol type="a" start="3">
	<li>1 pozycja</li>
	<li value="7">2 pozycja</li>
	<li>3 pozycja</li>
</ol>

Section 1.3Atrybut: reversed

Głównym zadaniem tego atrybutu jest numeracja listy od tyłu. Niestety jest jeszcze niewspierany przez przeglądarki. Szkoda.

Example 2HTML
1
2
3
4
5
6
<ol type="I" reversed>
	<li>1 pozycja</li>
	<li>2 pozycja</li>
	<li>3 pozycja</li>
	<li>4 pozycja</li>
</ol>

Section 2Podsumowanie

Jak widać, nowe atrybuty pozwalają na wiele. Jeden z nich powiela się ze stylami CSS, ale czego się nie robi dla semantyki. Jednocześnie, szkoda że atrybut reversed nie został poprawnie zaimplementowany we wszystkich przeglądarkach.

Poniżej przedstawione jest zestawienie zgodności atrybutów w przeglądarkach:

Zgodność z przeglądarkami
Atrybut Chrome Firefox IE Opera Safari
type="" + + + + +
start="" + + + + +
value="" + + + + +
<ol reversed> +/- - - - +/-
Share
Feedback

About the author

Staff Software Engineer

I've been writing this blog since 2009 and building for the web professionally for 14 years. Today I lead the frontend of the Cosmos platform at Bishop Fox, where I've been since day one of the project. Before that I worked at OLX, KUDO, Auto1 and eZ Systems. Here I write about what I've learned in practice: JavaScript, TypeScript, React, CSS and frontend architecture. I've also spoken at conferences across Poland and Europe. Got a question or an idea for a post? Let me know!