HTML - Seznamy

Seznamy v HTML jsou stejné jako např. ve Wordu. Seznam je několik oddělených položek. Tyto položky mohou být číslované nebo mohou mít odrážky (čtverečky, kolečka). Ukázka seznamů:

  • Položka 1
  • Položka 2

Jiný seznam:

  1. Položka 1
  2. Položka 2
  3. Položka 3
  4. Položka 4
  5. Položka 5

li

Základní prvek seznamu. Řádek, jedna položka (list-item). Vždy se nachází uvnitř seznamu (ul, ol, dir, menu). Vždy se zobrazuje na novém řádku.

Atribut
type (typ seznamu)disc
square
circle
A
a
i
I
1		puntík (plné kolečko)
čtvereček
kolečko (prázdné)
číslování A, B, C...
číslování a, b, c...
číslování i, ii, iii...
číslování I, II, III...
číslování 1, 2, 3...
Atribut value nastavuje číslo položky (požívá se v případě, že je třeba nastavit jiné číslo, než by logicky následovalo po předchozích položkách). Ukázka: 
<ul>
  <li type="square">Položka 1</li>
  <li value="10">Položka 2</li>
  <li type="1">Položka 3</li>
</ul>

ol

Číslovaný seznam (ordered list). Obsahuje jednotlivé položky ve značce li. Položky budou automaticky číslované. Atribut type má stejné hodnoty jako značka li (1, I, i, A, a) pro vybraný typ číslování. Atribut start nastavuje, kde má seznam začínat (jakým číslem). Příklad: 
<ol type="I" start="5">
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ol>

ul

Odrážkový seznam. Atribut type je podobný jako u li. Hodnoty square, circle a disc pro čtvereček, kolečko a puntík. Pomocí lze seznam vylepšit. CSS vlastnost list-style-image: url('obrazek.gif') nastaví místo odrážky zvolený obrázek. Je třeba vhodně nastavit velikost obrázku, ideální je zvolit průhledné pozadí, aby obrázek nenarušoval případné změny pozadí. Ukázka: 
<ul style="list-style-image: url('obrazek.gi')">
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ul>

Vnořené seznamy

Seznamy lze vytvářet i vnořeně (seznam v seznamu). Ukázka:

  1. Položka 1
  2. Položka 2
    1. Položka 2-1
      1. Položka 2-2-1
      2. Položka 2-2-2
    2. Položka 2-2
  3. Položka 3
  4. Položka 5
Zdrojový kód: 
<ol type="I">
  <li>Položka 1</li>
  <li>
    Položka 2
    <ol>
      <li>
        Položka 2-1
        <ol>
          <li>Položka 2-2-1</li>
          <li>Položka 2-2-2</li>
        </ol>
      </li>
      <li>Položka 2-2</li>
    </ol>
  </li>
  <li>Položka 3</li>
  <li>Položka 5</li>
</ol>

dl

Seznam definic (definition list). Obsahuje značky dt (defined term), které uzavírají definovaný pojem a dd (definition description), které uzavírají samotnou definici pojmu. Ukázka: 
<dl>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

dt

Pojem, který se definuje v seznamu dl.

dd

Definice pojmu, která definuje pojem dt v seznamu dl.

dir

Seznam, který se chová stejně jako ul, není třeba ho používat. Používejte ul.

menu

Seznam, který se chová stejně jako ul, není třeba ho používat. Používejte ul.

Využití seznamů v praxi

Seznamy jsou vhodné pro vytváření seznamů (díky automatickému číslování), jsou vhodné pro snadnou orientaci čtenáře v textu (oddělení jednotlivých částí textů odrážkami), pro seznamy odkazů, pro menu. Důležité jsou značky ul a ol pro jednotlivé typy seznamů a značka li pro položku seznamu (nazáleží na typu).



Doporučuji
Pro své weby používám *Webhosting C4: 20 GB prostoru, PHP, MySQL, e-maily, subdomény za 1200 Kč (zdarma 2 GB navíc každý rok). Více WebhostingC4.cz.
Potřebujete poradit?

Vyhledávání

Osobně doporučuji

Poradna

Pokud si nevíte rady, chcete kontakt na spolehlivého tvůrce webu, či vás zajímá cizí názor, ozvěte se.

Reklama

Reklama: