Seznami v HTML

V HTML sezname uporabimo, kadar želimo pregledno našteti več elementov. Seznami so zelo pogosti pri navodilih, lastnostih, menijih, korakih postopka in opisih pojmov. Poznamo neurejene, urejene in opisne sezname.

Pomni: Seznam uporabimo takrat, ko vsebina res predstavlja skupino točk, korakov ali opisov. Za navadno oblikovanje besedila seznam ni primerna izbira.

Osnovna pravila

Za neurejen seznam uporabljamo element <ul>.
Za urejen seznam uporabljamo element <ol>.
Posamezne točke neurejenega ali urejenega seznama zapisujemo z elementom <li>.
Za opisni seznam uporabljamo elemente <dl>, <dt> in <dd>.
Za spremembo videza oznak seznama praviloma uporabljamo CSS, ne pa neustreznih elementov.

Primerjave

Neurejen seznam

Za naštevanje uporabimo element <ul> (unordered list), znotraj katerega z elementi <li> določimo posamezne točke seznama.

Pozor: Elementa <ul> ali <ol> ne polnimo neposredno z navadnim besedilom. Posamezne točke morajo biti zapisane z elementi <li>.

Primer neurejenega seznama v HTML:

<ul>
   <li> Jabolka </li>
   <li> Hruške </li>
   <li> Banane </li>
   <li> Jagode </li>
</ul>

Jabolka
Hruške
Banane
Jagode

Urejen seznam

Za številčenje uporabimo element <ol> (ordered list). Tudi tukaj posamezne točke določimo z elementi <li>.

Primer urejenega seznama v HTML:

<ol>
   <li> Vklopi računalnik. </li>
   <li> Odpri brskalnik. </li>
   <li> Obišči spletno stran. </li>
   <li> Preberi navodila. </li>
</ol>

Vklopi računalnik.
Odpri brskalnik.
Obišči spletno stran.
Preberi navodila.

Opisni seznam

Za opisni seznam uporabimo element <dl> (description list), znotraj katerega uporabimo element <dt> za pojem in <dd> za njegov opis. Tak seznam je uporaben pri razlaganju izrazov, vprašanjih in odgovorih ali pri seznamu lastnosti.

Primer opisnega seznama v HTML:

<dl>
   <dt>HTML</dt>
   <dd>Jezik za označevanje vsebine spletnih strani.</dd>

   <dt>CSS</dt>
   <dd>Jezik za določanje videza spletnih strani.</dd>

   <dt>JavaScript</dt>
   <dd>Programski jezik za interaktivnost na spletnih straneh.</dd>
</dl>

HTML: Jezik za označevanje vsebine spletnih strani.
CSS: Jezik za določanje videza spletnih strani.
JavaScript: Programski jezik za interaktivnost na spletnih straneh.

Opisni seznam uporabimo takrat, ko želimo povezati pojem in njegov opis. Za navadno naštevanje uporabimo <ul> ali <ol>.

Atributi seznama `<ol>`

Pri urejenih seznamih lahko uporabimo tudi nekaj uporabnih atributov. Tako lahko določimo začetno številko, obrnemo vrstni red ali spremenimo način označevanja. MDN navaja, da atribut start določa začetno vrednost, atribut reversed obrne vrstni red številčenja, atribut type pa določa vrsto oznak.

Atribut `start`

Z atributom start določimo, pri kateri številki naj se seznam začne.

<ol start="5">
   <li> Peta točka </li>
   <li> Šesta točka </li>
   <li> Sedma točka </li>
</ol>

Peta točka
Šesta točka
Sedma točka

Atribut `reversed`

Z atributom reversed se seznam prikaže v obratnem vrstnem redu.

<ol reversed>
   <li> Tretji korak </li>
   <li> Drugi korak </li>
   <li> Prvi korak </li>
</ol>

Tretji korak
Drugi korak
Prvi korak

Atribut `type`

Z atributom type lahko pri urejenem seznamu spremenimo način označevanja. Pogoste vrednosti so 1, A, a, I in i.

<ol type="A">
   <li> Prva možnost </li>
   <li> Druga možnost </li>
   <li> Tretja možnost </li>
</ol>

Prva možnost
Druga možnost
Tretja možnost

Za spremembo videza oznak neurejenih seznamov ali številčenja urejenih seznamov danes pogosto uporabimo CSS. HTML določa pomen in zgradbo vsebine, CSS pa njen videz.

Seznami in sodobna raba

Seznami so pomemben del pomensko pravilnega HTML. Uporabimo jih, kadar vsebina res predstavlja skupino točk ali korakov. Ne uporabljamo jih samo za zamikanje besedila ali doseganje videza, saj je za to namenjen CSS.

Na sodobnih spletnih straneh sezname pogosto uporabljamo za navigacijo, prikaz korakov, lastnosti izdelkov, pogosta vprašanja in strukturirano predstavitev podatkov.

Primer različnih seznamov skupaj

<h3>Nakupovalni seznam</h3>
<ul>
   <li>Kruh</li>
   <li>Mleko</li>
   <li>Sir</li>
</ul>

<h3>Koraki priprave</h3>
<ol>
   <li>Pripravi sestavine.</li>
   <li>Zmešaj sestavine.</li>
   <li>Postrezi.</li>
</ol>

<h3>Pomen kratic</h3>
<dl>
   <dt>URL</dt>
   <dd>Naslov spletnega vira.</dd>
</dl>

Nakupovalni seznam

Kruh
Mleko
Sir

Koraki priprave

Pripravi sestavine.
Zmešaj sestavine.
Postrezi.

Pomen kratic

URL: Naslov spletnega vira.

Priporočila

Za navadno naštevanje uporabljaj <ul>, za korake ali zaporedje pa <ol>.
Pri opisih pojmov uporabljaj <dl>, <dt> in <dd>.
Vsako točko neurejenega ali urejenega seznama zapiši z elementom <li>.
Atribute start, reversed in type uporabljaj le takrat, ko res spreminjajo pomen ali predstavitev številčenja.
Za oblikovni videz seznamov uporabljaj CSS.

Pogoste napake

Elementa <ul> ali <ol> vsebujeta navadno besedilo namesto elementov <li>.
Za korake postopka se uporablja neurejen seznam, čeprav je pomembno zaporedje.
Opisni seznam se uporablja za navadno naštevanje, čeprav ni povezave med pojmom in opisom.
Seznami se uporabljajo samo zaradi zamika ali videza besedila.
Pri urejenem seznamu se atribute uporablja brez razumevanja njihovega učinka.

Nazaj

Naprej