<ul> ... </ul>
Neuspořádané seznamy se používají:
- pro přehledné zobrazení nějakých položek, ve kterých nezáleží na pořadí, vizuálně se projevují tak, jak vidíte zde (někdy začínají kolečkem, zde je to upraveno v CSS),
- také pro vytváření menu, protože menu je fakticky seznam odkazů.
"Bráškou" neuspořádaného seznamu je uspořádaný seznam <ol>. Ten se používá v obdobných případech, ale rozdíl je v tom, že u nich záleží na pořadí. Jednotlivé položky uvnitř značek <ul> a <ol> se označjí pomocí značek <li>, více zde.
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 seznamu. Zde máte grafické znázornění zápisu:
Ukázka použití <ul> v HTML
<ul>
<li>obsah první položky seznamu</li>
<li>obsah druhé položky seznamu</li>
</ul>
Do otevírací značky <ul> můžete zadat některý z tvarů předdefinovaných v HTML, a to:
- type="disc" – puntík
- type="square" – čtvereček
- type="circle" – kolečko
POZOR! Tyto atributy jsou již zastaralé a v moderním HTML5 se již nemají používat, jinak byste porušovali pravidla a mělo by to negativní vliv na SEO.
Modernějším – a rozhodně užitečnějším – řešením je vzhled určovat pomocí CSS stylů.
Jak pomocí CSS upravit vzhled neuspořá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 <ul> se nejčastěji používají následující vlastnosti CSS:
- list-style-type – jedná se o obdobu výše popsané zastaralé a zavržené metody. Používá pouze předdefinovaná slova:
- list-style-type: disc – plné kolečko
- list-style-type: circle – prázdné kolečko
- list-style-type: square – čtvereček
- list-style-type: none – nezobrazí se žádný obrázek
- list-style-image – typ obrázku může být užitečný, ale pokud chcete použít nějaký jiný obrázek, než předdefinované, tak asi oceníte tuto vlastnost. Ukázka zápisu
ul{list-style-image:url(../obrazky/obrazek.png)}
list-style-position
- – definuje dva možné způsoby chování, a to:
- 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,
- 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