Zagnieżdżanie list

Zagnieżdżanie list polega na umieszczeniu jednej listy wewnątrz innej listy. Jest to przydatne, gdy chcemy przedstawić zestawienie informacji w postaci hierarchicznej lub gdy chcemy przedstawić informacje w postaci poziomów zagłębienia.

Aby zagnieżdżać listy, należy po prostu umieścić tagi listy wewnątrz odpowiedniego tagu <li> .

Zagnieżdżona Lista Uporządkowana

								
<ol>
  <li>Pierwszy punkt</li>
  <li>Drugi punkt
    <ol>
      <li>Punkt 2.1</li>
      <li>Punkt 2.2</li>
    </ol>
  </li>
  <li>Trzeci punkt</li>
</ol>

Zagnieżdżona lista Nieuporządkowana

								
<ul>
  <li>Piwo <img src="beer.png"></li>
  <li>Wino <img src="wine.png"></li>
  <li>
    Jabłka
    <ul>
	 <li>Zielone <img src="greenApple.png"></li>
         <li>Czerwone <img src="redApple.png"></li>
    </ul>
  </li>
</ul>

Notatka

Zagnieżdżanie list w HTML jest bardzo ważne, ponieważ pozwala na hierarchiczną organizację treści i wyświetlanie ich w sposób uporządkowany i czytelny dla użytkowników. Zagnieżdżenie list pozwala również na tworzenie skomplikowanych układów, które można łatwo modyfikować i aktualizować.