Kreiranje podlisti u HTML-u
Unutar bilo koje liste možemo smestiti pod-listu. Ovo je suštinski jednostavno, samo ne zaboravite najvažnije pravilo - unutar <ul> i <ol> oznaka, mogu se naći samo stavke liste!
To u stvari znači da se bilo koja pod-lista može naći samo unutar odgovarajućeg <li> elementa.
<ul>
<li>...</li>
<li>...</li>
<li>...
<ul>
[stavke podliste]
</ul>
</li>
<li>...</li>
<li>...</li>
</ul>
Pod-lista ne mora biti istog tipa kao nad-lista. To znači da možemo slobodno umetnuti numerisanu listu unutar neuređene i obrnuto.
Isto tako, broj nivoa pod-listi nije ograničen, tako da i pod-liste mogu imati svoje pod-pod-liste.
Primeri za liste
Primer umetanja neuređene liste kao pod-liste u uređenoj listi. Pod-listu ćemo umetnuti unutar druge stavke glavne liste.
<ol>
<li>prva stavka</li>
<li>druga stavka
<ul>
<li>prva pod-stavka</li>
<li>druga pod-stavka</li>
</ul>
</li> <!-- OVDE se tek završava druga glavna stavka!!! -->
<li>treća stavka</li>
</ol>
Prikazuje se kao...
Hajde da zakomplikujemo malo. Sada ćemo umetnuti pod-liste unutar prve i druge glavne stavke, a onda ćemo unutar prve pod-stavke umetnuti pod-pod-listu! Glavna lista je numerisana, pod-lista je neuređena, a pod-pod-lista je ponovo numerisana.
<ol>
<li>prva stavka
<ul>
<li>prva pod-stavka prve stavke</li>
<li>druga pod-stavka prve stavke</li>
</ul>
</li> <!-- OVDE se završava prva glavna stavka -->
<li>druga stavka
<ul>
<li>prva pod-stavka druge stavke
<ol>
<li>prva pod-pod-stavka</li>
<li>druga pod-pod-stavka</li>
</ol>
</li> <!-- OVDE se završava prva pod-stavka! -->
<li>druga pod-stavka druge stavke</li>
</ul>
</li> <!-- OVDE se tek završava druga glavna stavka!!! -->
<li>treća stavka</li>
</ol>
Ovde smo namerno obojili stavke različitim bojama, kako biste lakše uočili šta je šta.