<ol> ... </ol>

Pokud chcete, aby jednotlivé odstavce byly očíslovány, tak právě k tomu slouží tato HTML značka. Podívejte se, jak to udělat.

Uspořádané seznamy se používají vždy tam, kde je potřeba zvýšit přehlednost obsahu a současně označit pořadí. Může to být popis nějakého postupu nebo v případě, že se budete chtít odkazovat na konkrétní odstavec textu, jako v případě právních dokumentů. Uspořádané seznamy poutají pozornost návštěvníků, což může být velice užitečné.

Příklad použití neuspořádaného seznamu

Použití je vcelku snadné. Stačí vytvořit otevírací značku, zavírací značku a mezi ně vkládat libovolné množství položek, které se označují pomocí značek <li>, viz samostatný článek.

 Ukázka použití <ol> v HTML

<ol>
   <li>obsah první položky seznamu</li>
   <li>obsah druhé položky seznamu</li>
</ol>

Do otevírací značky <ul> můžete zadat některý z tvarů předdefinovaných v HTML např. <ol type="a">, a to z následujících možností:

1. type="1" – (defaultní)  zobrazí se jako v tomto případě
2. type="a" – bude se označovat malými písmeny a, b, c...
3. type="A" – bude se označovat velkými písmeny A, B, C...
4. type="i" – bude se označovat malými římskými písmeny i, ii, iii, vi...
5. type="I"  – bude se označovat velkými římskými písmeny I, II, III. VI...

POZOR! Tyto atributy jsou sice funkční, ale již zastaralé a v HTML5 zakázané, a to protože tvůrce webu má oddělovat obsah od vzhledu. Správný postup, je stylování pomocí externího souboru CSS.

Jak pomocí CSS upravit vzhled uspořádaného seznamu v HTML

V první řadě je třeba připomenout, že pravidla CSS mají být v externím souboru. Pro tag <ol> se nejčastěji používají následující vlastnosti CSS:

1. list-style-type – jedná se o obdobu výše popsané zastaralé a zavržené metody. Používá pouze předdefinovaná slova:
   1. list-style-type: decimal – (defaultní) celé číslo začínající jedničkou, tedy 1, 2, 3... 
   2. list-style-type: decimal-leading-zero – celé číslo, ale uvozené nulou, tedy 01, 02, 03...
   3. list-style-type: lower-latin – malé písmeno, tedy a, b, c...
   4. list-style-type: upper-latin – velké písmeno, tedy A, B, C...
   5. list-style-type: lower-roman – malé římské číslo, tedy i, ii, iii, iv...
   6. list-style-type: upper-roman – velké římské číslo, tedy I, II, III, VI...
2. list-style-position – definuje dva možné způsoby chování, a to:
   1. list-style-position: outside –  je použit na této stránce, tedy nový řádek pod symbolem bude začínat na úrovni prvního řádku,
   2. list-style-position: inside – se bude na dalším řádku textu chovat tak, že druhý řádek bude začínat zarovnaný se značkou. 

Kam dál

Kurz základy HTML a CSS | Kurz tvorby webových stránek pomocí systému Joomla