Seznamy - Začínáme s HTML

vydáno: 15.02.2016, seriál: Začínáme s HTML

Toto je 9. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

Pokud potřebujete zobrazit ve vašem HTML dokumentu data v podobě seznamů, lze využít tagů <ul> nebo <ol>. Tyto tagy dokáží zobrazit zadaná data do řádkových seznamů. Každý řádek seznamu je definován pomocí tagu <li>. Seznamy lze využít i k definici termínu a to pomocí tagu <dl>.

Nečíslovaný seznam

Prvním typem seznamů je nečíslovaný seznam. Ten se označuje párovým tagem <ul>. Mezi tagy <ul> vkládáme řádkové položky <li> </li>. Každý řádek je určen jedním elementem <li>.

Před každým řádkem se v základním nastavení zobrazí černý puntík.

1. položka
2. položka

Pomocí kaskádový stylů, lze tento grafický prvek změnit. Jak na to, se dozvíte v jednom z našich seriálů o CSS.

Ukázka:

HTML

<ul>
   <li>Banán</li>
   <li>Jablko</li>
<ul>

Použité tagy: <ul>, <li>

Číslovaný seznam

Dalším typem je číslovaný seznam. Označuje se párovým tagem <ol>. Položky i zde vkládáme pomocí tagů <li>.

Číslovaný seznam zobrazuje před položkami čísla, písmena abecedy nebo římské číslice. Pomocí atributu start lze změnit počátek číslování seznamu.

Ukázka:

HTML

<ol>
  <li>Karel</li>
  <li>Mirek</li>
</ol>

Použité tagy: <ol>, <li>

Ukázka:

HTML

<ol start="3">
   <li>Seznam začíná trojkou</li>
   <li>Seznam pokračuje čtyřkou</li>
</ol>

Použité tagy: <ol>, <li>

Víceúrovňové seznamy

Seznamy lze definovat i jako víceúrovňové. Pro rozvětvení seznamu stačí do tagu <li> vložit další blok nečíslovaného seznamu <ul>.

Ukázka:

HTML

<ul>
  <li>Položka 1</li>
  <li>Položka 2
      <ul>
         <li>Položka 2.1</li>
         <li>Položka 2.2</li>
      </ul>
  </li>
  <li>Položka 3</li>
</ul>

Použité tagy: <ul>, <li>

Definice termínu

K přehlednému definování termínů lze také využít seznamy. Aby byly tyto termíny odlišeny využívá se pro jejich definici tag <dl> (description lists). Název termínu, který chceme popisovat zapíšeme mezi tag <dt>. Samotný popis se poté vkládá mezi tag <dd>.

Ukázka:

HTML

<dl>
   <dt>Termín</dt>
   <dd>Slovní spojení definující daný termín</dd>
</dl>

Použité tagy: <dl>, <dt>, <dd>

Zrekapitujume si probrané tagy.

Témata

Seriály

Seznamy - Začínáme s HTML

Nečíslovaný seznam

Číslovaný seznam

Víceúrovňové seznamy

Definice termínu

`<ul>`

`<li>`

`<ol>`

`<dl>`

`<dt>`

`<dd>`

Seriál Začínáme s HTML

Seznam všech článků seriálu: