HTML zoznamy (tagy ul, ol, dl)

V tejto kapitole tutoriálu si vysvetlíme tvorbu zoznamov v jazyku HTML. Jazyk HTML umožňuje vytvárať tri základné typy zoznamov:

• HTML tag ul pre odrážkový zoznam
• HTML tag ol pre číselný zoznam
• HTML tag dl pre definičný zoznam

Odrážkový zoznam v HTML (tag ul)

Anglický názov tagu: unordered list

Odrážkový zoznam je najčastejšie používaným zoznamom v HTML. Použijeme ho vtedy, keď nezáleží na poradí jednotlivých položiek zoznamu, resp. nie je potrebné položky zoznamu pomenovávať. Na odrážkový zoznam sa používa HTML tag ul a položky sa uvádzajú vnútri v tagoch s názvom li.

<p>Tento HTML tutoriál je zameraný na tri typy zoznamov</p>
<ul>
  <li>odrážkový zoznam</li>
  <li>číselný zoznam</li>
  <li>definičný zoznam</li>
</ul>

Typy odrážok je možné nastaviť pomocou atribútu type. To môžeme nastaviť pre celý zoznam (všetky položky) v HTML elemente ul alebo aj jednotlivo pre položky v tagu li. Hodnoty atribútu môžu byť:

• disc (vyfarbený kruh)
• circle (kružnica)
• square (štvorec)
• none (bez odrážok)

<ul type="circle">
  <li>odrážkový zoznam</li>
  <li>číselný zoznam</li>
</ul>
<ul type="disc">
  <li>odrážkový zoznam</li>
  <li>číselný zoznam</li>
</ul>
<ul type="square">
  <li>odrážkový zoznam</li>
  <li>číselný zoznam</li>
</ul>
<ul type="none">
  <li>položka bez viditeľnej odrážky</li>
  <li>položka bez viditeľnej odrážky</li>
</ul>

Číselný zoznam v HTML (tag ol)

Anglický názov tagu: ordered list

Číselný zoznam používame, keď chceme prvky v zozname číslovať alebo nám záleží na poradí. HTML tag pre číselný zoznam je ol a položky sa vkladajú rovnako - pomocou tagov li. Typy číselných odrážok je tiež možné nastaviť pomocou atribútu type v elemente ol:

• 1 - číslice (arabské)
• I - rímske čísla
• i - rímske čísla malé
• A - veľké znaky abecedy
• a - malé znaky abecedy

Taktiež môžeme zvoliť aj prvé (štartovacie) číslo pomocou atribútu start alebo prázdny atribút reversed pre otočenie poradia.

<ol type="1">
  <li>položka 1</li>
  <li>položka 2</li>
</ol>
<ol type="A">
  <li>Položka A</li>
  <li>Položka B</li>
  <li>Položka C</li>
</ol>
<ol type="I">
  <li>Položka</li>
  <li>Položka</li>
  <li>Položka</li>
  <li>Položka</li>
</ol>
<ol type="1" start="3" reversed>
  <li>Položka 3</li>
  <li>Položka 2</li>
  <li>Položka 1</li>
</ol>

Vnáranie HTML zoznamov

Odrážkové a bezodrážkové zoznamy môžeme vnárať do seba a vytvárať tak vnorené (tzv. viacúrovňové) zoznamy.

<ol type="1">
  <li>položka 1</li>
  <li>položka 2
    <ol type="a">
      <li>Položka 2.a</li>
      <li>Položka 2.b
        <ul>
          <li>položka tretej úrovne 1</li>
          <li>položka tretej úrovne 2</li>
        </ul>
      </li>
    </ol>
  </li>
</ol>

Pre vnáranie stačí do tagu pre položku vložiť nový zoznam. V položkách zoznamov (v tagu li) môžu byť v podstate ľubovoľné HTML elementy (odseky, obrázky, odkazy a pod.).

Definičný zoznam v HTML (tag dl)

Anglický názov tagu: description list

Definičný zoznam sa používa napríklad pre zoznam pojmov a vysvetlení (register). V porovnaní s predchádzajúcimi zoznamami má mierne odlišnú syntax: do obaľovacieho tagu dl sa vkladajú dva tagy:

• tag dt pre pojem (angl. term)

• tag dd pre vysvetlenie/definíciu tohto pojmu (angl. definition)

<dl>
  <dt><strong>HTML</strong></dt>
  <dd>Hypertext Markup Language</dd>
  <dt><strong>CSS</strong></dt>
  <dd>Cascading Style Sheets</dd>
  <dt><strong>DL</strong></dt>
  <dd>description list</dd>
</dl>

Tým sme si prešli tutoriál na tvorby zoznamov v jazyku HTML.

Zoznamy v HTML - zhrnutie