Kombinirani seznami v HTML

Kombinirani oziroma gnezdeni seznami nastanejo, ko znotraj ene točke seznama vključimo nov seznam. Na ta način lahko vsebino razdelimo na glavne točke in podtočke ali pa znotraj opisa dodamo dodatno strukturirane podatke.

Pri takem zapisu moramo paziti, da dodatni seznam vključimo znotraj elementa <li> oziroma znotraj elementa <dd>, kadar gre za opisni seznam. Pomembno je tudi pravilno zaključevanje oznak in dosledno gnezdenje elementov.

Osnovna pravila

• Seznam lahko vsebuje nov seznam kot podrejen element.
• Podrejeni seznam mora biti vključen znotraj elementa <li> ali <dd>.
• Pri gnezdenju moramo oznake zaključevati v pravilnem vrstnem redu.
• Kombinirane sezname uporabljamo za večnivojsko razvrščanje vsebine.
• Opisni seznam je primeren takrat, ko povezujemo pojem in njegov opis.

Kombinirani seznami

V kombiniranem seznamu lahko na primer znotraj urejenega seznama uporabimo neurejen seznam ali obratno. Tak zapis je primeren pri prikazu skupin in njihovih podskupin, korakov in podkorakov ali pri pregledni razvrstitvi podatkov.

Primer kombiniranega seznama, v katerem je v urejen seznam vključen neurejen seznam:

<ol>
   <li>Ford
      <ul>
         <li>Focus</li>
         <li>Mustang</li>
         <li>Escape</li>
      </ul>
   </li>
   <li>Toyota
      <ul>
         <li>Camry</li>
         <li>Corolla</li>
         <li>RAV4</li>
      </ul>
   </li>
   <li>Honda
      <ul>
         <li>Civic</li>
         <li>Accord</li>
         <li>CR-V</li>
      </ul>
   </li>
</ol>

Drugi primer kombiniranega seznama

Kombinirane sezname pogosto uporabljamo pri navodilih, menijih, kategorijah in podkategorijah.

<ul>
   <li>Sadje
      <ol>
         <li>Jabolka</li>
         <li>Hruške</li>
         <li>Banane</li>
      </ol>
   </li>
   <li>Zelenjava
      <ol>
         <li>Korenje</li>
         <li>Solata</li>
         <li>Paradižnik</li>
      </ol>
   </li>
</ul>

Kombinirani seznami z opisnim seznamom

Kombinirani seznam lahko izdelamo tudi z opisnim seznamom. V takem primeru uporabimo element <dl>, znotraj katerega element <dt> predstavlja pojem, element <dd> pa njegov opis. Znotraj opisa lahko dodamo še neurejen ali urejen seznam.

Primer opisnega seznama, ki vsebuje neurejen seznam:

<dl>
   <dt>Potrebna orodja</dt>
   <dd>
      <ul>
         <li>Urejevalnik kode</li>
         <li>Spletni brskalnik</li>
         <li>Dostop do interneta</li>
      </ul>
   </dd>

   <dt>Datoteke</dt>
   <dd>
      <ul>
         <li>index.html</li>
         <li>style.css</li>
      </ul>
   </dd>
</dl>

Primer opisnega seznama, ki vsebuje urejen seznam:

<dl>
   <dt>Postopek izdelave strani</dt>
   <dd>
      <ol>
         <li>Odpri urejevalnik kode.</li>
         <li>Napiši HTML-kodo.</li>
         <li>Shrani datoteko.</li>
         <li>Odpri datoteko v brskalniku.</li>
      </ol>
   </dd>

   <dt>Preverjanje</dt>
   <dd>
      <ol>
         <li>Preveri prikaz strani.</li>
         <li>Preizkusi povezave.</li>
      </ol>
   </dd>
</dl>

Primerjava

Priporočila

• Podrejeni seznam vedno zapiši znotraj elementa <li> ali <dd>.
• Vrsto seznama izberi glede na pomen vsebine.
• Pri večnivojskih seznamih ohranjaj dosledno zamikanje kode.
• Pri opisnem seznamu uporabljaj <dt> za pojem in <dd> za opis.
• Gnezdene sezname uporabljaj takrat, ko res izboljšajo preglednost vsebine.

Pogoste napake

• Podrejeni seznam ni zapisan znotraj elementa <li> ali <dd>.
• Oznake so zaključene v napačnem vrstnem redu.
• Za opisno razmerje med pojmom in razlago ni uporabljen opisni seznam.
• Vrsta seznama ni usklajena z namenom vsebine.
• Preveč globoko gnezdenje zmanjša preglednost zapisa.