Seznamy v HTML: ul, ol a dl

Seznamy patří k nejčastějším částem webu: menu, kroky postupu, přehled služeb. V HTML máme tři základní typy.

Odrážkový seznam: ul

<ul>
  <li>Web na míru</li>
  <li>E-shop</li>
  <li>Údržba</li>
</ul>

Značka ul znamená seznam bez pořadí. Každá položka je uvnitř značky li.

Číslovaný seznam: ol

<ol>
  <li>Vyberte doménu</li>
  <li>Nahrajte web</li>
  <li>Ověřte výsledek</li>
</ol>

Značka ol znamená seznam s pořadím. Prohlížeč čísla doplní sám, takže když přidáte krok doprostřed, čísla se přepočítají. Atribut start="5" začne číslování jinde.

Dvojice pojem a vysvětlení: dl

<dl>
  <dt>HTML</dt>
  <dd>Jazyk, kterým se popisuje obsah stránky.</dd>
  <dt>CSS</dt>
  <dd>Jazyk pro vzhled stránky.</dd>
</dl>

Značka dl se hodí na slovníček, otázky a odpovědi nebo přehled parametrů. Pojem patří do značky dt, vysvětlení do značky dd.

Vnořený seznam

<ul>
  <li>Služby
    <ul>
      <li>Web</li>
      <li>Aplikace</li>
    </ul>
  </li>
  <li>Kontakt</li>
</ul>

Seznam uvnitř položky vložíte přímo do značky li, ne mezi položky.

Časté chyby

• Text přímo v ul. Každá položka musí být uvnitř značky li, jinak je kód neplatný.
• Špatné vnoření. Seznam vložený mezi dvě položky místo do nich dělá nepořádek.
• Seznam pro vzhled. Seznam jako způsob, jak něco odsadit, je špatně. Na odsazení použijte CSS.
• Chybějící koncová značka. Každé ul, ol a dl musí mít svou koncovou značku.

Teď umíte vytvořit odrážky, číslované kroky i slovníček. Seznamy se hodí téměř na každou stránku, proto se vyplatí je zvládnout. 👍