Seznamy

Druh číslování a odrážek určíme pomocí stylů:

číslované seznamy
Číslovaný seznam

<ol>
  <li>První položka seznamu</li>
  <li>Druhá položka</li>
  <li>Třetí položka</li>
</ol>

Příklad

<ol>
  <li>Pyramidy</li>
  <li>Visuté zahrady</li>
  <li>Artemidin chrám</li>
  <li>Diova socha</li>
  <li>Mausoleum</li>
  <li>Kolos</li>
  <li>Maják</li>
</ol>

seznamy s odrážkami
Seznam s odrážkami

<ul>
  <li>První položka seznamu</li>
  <li>Druhá položka</li>
  <li>Třetí položka</li>
</ul>

Vnořené seznamy

<ul>
  <li>První položka seznamu</li>
  <li>Druhá položka
    <ul>
      <li>První položka podseznamu</li>
      <li>Druhá položka podseznamu</li>
    </ul>
  </li><!-- konec druhé položky hlavního seznamu -->
  <li>Třetí položka hlavního seznamu</li>
 </ul>

Podseznam musí být vnořen do položky hlavního seznamu, nikoli mezi položky.
Tzn., že konec položky hlavního seznamu musí být až za koncem vnořeného seznamu.

Správně

<ul>
  <li>Pyramidy v Gíze
    <ul>
      <li>Chufuova</li>
      <li>Rachefova</li>
      <li>Menkauerova</li>
    </ul>
  </li><!-- konec položky Pyramidy v Gíze -->
  <li>Visuté zahrady</li>
  <li>Artemidin chrám</li>
  <li>Diova socha</li>
  <li>Mausoleum</li>
  <li>Kolos</li>
  <li>Maják</li>
</ul>

Špatně

<ul>
  <li>Pyramidy v Gíze</li>
    <ul>
      <li>Chufuova</li>
      <li>Rachefova</li>
      <li>Menkauerova</li>
    </ul>
  <li>Visuté zahrady</li>
  <li>Artemidin chrám</li>
  <li>Diova socha</li>
  <li>Mausoleum</li>
  <li>Kolos</li>
  <li>Maják</li>
</ul>

Seznam popisů - rejstřík

Seznam popisů je tvořen trojicí značek - dl (seznam), dt (termín), dd (popis):
Pomocí stylů můžeme nastavit zvýrazněné písmo termínů a změnit odsazení popisů.

<dl>
  <dt>mausoleum</dt><dd>monumentální hrobka</dd>
  <dt>kolos</dt><dd>antická socha nadživotní velikosti</dd>
</dl>

Seznamy odkazů - vyjížděcí menu

Pro vjížděcí nebo roletkové menu se využívají vnořené nečíslované seznamy. Položky hlavního seznamu tvoří hlavní menu, podseznamy vnořené do jednotlivých položek tvoří podmenu.

Ukázka html struktury

<nav>
 <ul>
  <li><a href="pyramidy.html">Pyramidy</a>
      <ul>
        <li><a href="pyramidy-chufuova.html">Chufuova</a></li>
        <li><a href="pyramidy-rachefova.html">Rachefova</a></li>
        <li><a href="pyramidy-menkauerova.html">Menkauerova</a></li>
      </ul>
  </li><!-- konec položky Pyramidy -->

  <li><a href="zahrady.html">Visuté zahrady</a>
      <ul>
        <li><a href="semiramis.html">Semiramis</a></li>
        <li><a href="babylon.html">Babylon</a></li>
      </ul>
  </li><!-- konec položky Visuté zahrady -->

  <li><a href="chram.html">Artemidin chrám</a>
      <ul>
        <li><a href="artemis.html">Artemis</a></li>
        <li><a href="apollon.html">Apollón</a></li>
      </ul>
  </li><!-- konec položky Artemidin chrám -->

  <li><a href="socha.html">Diova socha</a>
      <ul>
        <li><a href="zeus.html">Zeus</a></li>
        <li><a href="olympie.html">Olympie</a></li>
      </ul>
  </li><!-- konec položky Diova socha -->

  <li><a href="mausoleum.html">Mausoleum</a></li>
  <li><a href="kolos.html">Kolos</a></li>
  <li><a href="majak.html">Maják</a></li>
 </ul>
</nav>

Pomocí css vlastností jsou podmenu skryty a jsou zobrazovány při najetí myší na položku hlavního seznamu.