HTML - Liste

HTML liste se koriste za prikaz liste informacija na dobro formiran i semantički način. Postoje tri različite vrste listi u HTML-u i svaka ima određenu svrhu i značenje.

  • Neuređene liste (Unordered lists) - koristi se za kreiranje popisa povezanih stavki, neodređenim redosljedom.
  • Uređene liste (Ordered lists) - koristi se za kreiranje popisa povezanih stavki, određenim redoslijedom.
  • Lista opisa (Definition list) - koristi se za pravljenje liste pojmova i njihovih opisa.

HTML neuređene liste

Neuređene lista kreiramo pomoću taga <ul>, a svaka stavka liste počinje s tagom <li>. Stavke se označavaju sa malim punim kružićima. Pogledajmo primjer: 

<ul>
    <li>Banja Luka</li>
    <li>Beograd</li>
    <li>Zagreb</li>
</ul>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Unordered List - Neuređene liste</title>
</head>
<body>
    <h2>HTML neuređene liste</h2>
  <ul>
        <li>Banja Luka</li>
        <li>Beograd</li>
        <li>Zagreb</li>
    </ul>
    <hr>
    <h2>HTML Ugnježdene neuređene liste</h2>
    <ul>
        <li>Kolač
            <ul>
                <li>Čokoladni kolač</li>
                <li>Voćni kolač</li>
            </ul>
        </li>
        <li>Meso</li>
        <li>Sir</li>
    </ul>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

  • Banja Luka
  • Beograd
  • Zagreb

Takođe možete promjeniti male pune kružiče na svojoj listi koristeći CSS svojstva liste-style. Sljedeće pravilo stila mijenja kružiće u kvadratiće: 

ul {
    list-style-type: square;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Promijena vrstu nabrajanja na HTML neuređenim listama pomoću CSS-a</title>
    <style>
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ul>
        <li>Čokoladni kolač</li>
        <li>Voćni kolač</li>
        <li>Dijetalni kolač</li>
    </ul>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

  • Čokoladni kolač
  • Voćni kolač
  • Dijetalni kolač

HTML uređene liste

Uređene lista kreiraju se korištenjem taga <ol>, a svaka stavka liste započinje s tagom <li>. Uređene liste koriste se kada je važan redosljed stavki popisa. Stavke popisa u određenoj listi označene su brojevima. Pogledajmo primjer: 

<ol>
    <li>Banja Luka</li>
    <li>Beograd</li>
    <li>Zagreb</li>
</ol>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Ordered List - Uređene liste</title>
</head>
<body>
    <h2>HTML Uređene liste </h2>
  <ol>
        <li>Banja Luka</li>
        <li>Beograd</li>
        <li>Zagreb</li>
    </ol>
    <hr>
    <h2>HTML Ugnježdene uređene liste</h2>
    <ol>
        <li>Kolač
            <ul>
                <li>Čokoladni kolač</li>
                <li>Voćni kolač</li>
            </ul>
        </li>
        <li>Meso</li>
        <li>Sir</li>
    </ol>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

  1. Banja Luka
  2. Beograd
  3. Zagreb

Numerisanje stavki na uređenim listama počinje s brojem 1. Međutim, ako želite promijeniti, možete koristiti atribut start, kao što je prikazano u sljedećem primjeru: 

<ol start="10">
    <li>Banja Luka</li>
    <li>Beograd</li>
    <li>Zagreb</li>
</ol>

Prikaz koda iz gornjeg primjera izgledaće ovako:

  1. Banja Luka
  2. Beograd
  3. Zagreb

Kao i u neuređenim listama, možete koristiti CSS svojstvo list-style-type da biste promijenili tip numerisanja u uređenim listama. Sljedeće pravilo stila mijenja vrstu markera u rimske brojeve. 

ol {
    list-style-type: upper-roman;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Promijena vrste numerisanja na HTML neuređenoj listi pomoću CSS-a</title>
    <style>
        ol {
            list-style-type: upper-roman;
        }
    </style>
</head>
<body>
    <ol>
        <li>Vežite sigurnosni pojas</li>
        <li>Pokrenite automobil</li>
        <li>Pogledajte okolo i krenite</li>
    </ol>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

  1. Vežite sigurnosni pojas
  2. Pokrenite automobil
  3. Pogledajte okolo i krenite

HTML opisne liste

Opisna lista je popis predmeta s opisom ili definicijom svake stavke. Opisna liste se kreiraju korištenjem elementa <dl>. Element <dl> koristi se zajedno sa <dt> elementom koji određuje pojam, i <dd> elementom koji određuje definiciju termina. Pretraživači obično prikazuju definicijske liste postavljanjem pojmova i definicija u zasebne redove, pri čemu su definicije pojma malo uvučene. Pogledajmo primjera: 

<dl>
    <dt>Kupovina</dt>
    <dd>Moram ići u prodavnicu da kupim namirnice za kuću.</dd>
    <dt>Namirnice</dt>
    <dd>Namirnice koje sam kupio su: hljeb i mljeko.</dd>
</dl>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML - Opisne liste</title>
</head>
<body>
    <h2>HTML opisne liste</h2>
  <dl>
        <dt>Kupovina</dt>
        <dd>Moram ići u prodavnicu da kupim namirnice za kuću.</dd>
        <dt>Namirnice</dt>
        <dd>Namirnice koje sam kupio su: hljeb i mljeko.</dd>
    </dl>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Kupovina
Moram ići u prodavnicu da kupim namirnice za kuću.
Namirnice
Namirnice koje sam kupio su: hljeb i mljeko.