HTML - Liste


HTML liste koriste se za prikaz liste informacija na dobro formiran i semantički način. Postoje tri različite vrste lista 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>
  • Banja Luka
  • Beograd
  • Zagreb
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>

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>


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>
  1. Banja Luka
  2. Beograd
  3. Zagreb
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>

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>
  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>


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>

Prikaz primjera izgledaće otprilike ovako:

Kupovina
Moram ići u prodavnicu da kupim namirnice za kuću.
Namirnice
Namirnice koje sam kupio su: hljeb i mljeko.
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>