Tomáš Daněk

Seznamy

Neuspořádaný seznam (odrážky) <ul>

Výčet zdůrazňuje rovnocennost položek.

Element <ul> ohraničuje obsah seznamu. Jednotlivé položky <li> mohou obsahovat:

• text
• řádkové elementy
• blokové elementy

<ul>
  <li>jedna položka</li>
  <li>druhá položka</li>
  <li>třetí položka</li>
</ul>

Uspořádaný seznam (číslování) <ol>

Výčet zdůrazňuje rovnocennost a pořadí položek.

Element <ol> ohraničuje obsah seznamu. Jednotlivé položky <li> mohou obsahovat:

• text
• řádkové elementy
• blokové elementy

<ol>
  <li>první položka</li>
  <li>druhá položka</li>
  <li>třetí položka</li>
</ol>

Nastavení počátku a hodnoty číslování:

<ol start="4">
  <li>čtvrtá položka</li>
  <li>pátá položka</li>
  <li value="2">druhá položka</li>
</ol>

Definice

Definice je možné použít k vysvětlení pojmů, nebo několik podobných témat – definice (témata) umístěte do elementů <dt> a vysvětlení do elementů <dd>.

Seznam definic <dl>

Ohraničuje obsah seznamu.

Definice <dt>

Měla by být co možná nejkratší. Povolený obsah:

• text
• řádkové elementy

Popis <dd>

Povolený obsah:

• text
• řádkové elementy
• blokové elementy

<dl>
  <dt>první pojem</dt>
  <dd>vysvětlení prvního pojmu</dd>
  <dt>druhý pojem</dt>
  <dd>vysvětlení druhého pojmu</dd>
  <dd>jiné vysvětlení druhého pojmu</dd>
</dl>

Příklady

Kombinace seznamů:

<ul>
  <li>text ... 
    <ol>
      <li>text ... </li>
      <li>text ... </li>
    </ol>
  </li>
  <li>text ... </li>
</ul>

Kombinace definic a seznamů:

<dl>
  <dt>první pojem</dt>
    <dd>vysvětlení ... 
      <ul>
        <li>text ... </li>
        <li>text ... </li>
      </ul>
    </dd>
  <dt>druhý pojem</dt>
  <dd>vysvětlení ...</dd>
</dl>

 Výhody používání seznamů a definic

• Dokument je lépe strukturován
• Uživatel se na stránce lépe orientuje (dlouhé texty mohou čtenáře odradit)

Doporučení:
Delší texty rozdělujte na kratší úseky pomocí nadpisů (h1 až h6), seznamů (ul, ol) a definic (dt) apod.