search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

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

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.

Znacznik <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.

Atrybut: 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

Atrybuty: 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).

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>

Atrybut: reversed

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

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>

Podsumowanie

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> +/- - - - +/-
  • Przydałaby się strona demonstracyjna 🙂
    Pozdrawiam!

  • cvan

    2 pozycja prawdopodobnie się przyda gdy kilka elementów z listy ma być ukryte (wyeliminowane?), albo coś w tym rodzaju.

  • value – tutaj chyba chodzi o taką sytuację:
    Mamy spis rodzin w bloku, ale zdarza się, że w jednym mieszkaniu może mieszkać więcej niż jedno małżeństwo:

    Kowalscy
    Nowakowie
    Kwiatkowscy
    Żurawscy
    Frankowscy

    Czy dobrze to rozumiem?

  • PS. Szkoda, że w komentarzach są wycinane znaczniki HTML, a nie zamieniane na encje – bez tego mój poprzedni komentarz nie ma sensu…

  • Piotr Nalepa

    zawsze można od razu wstawiać encje 😉