Zagnieżdżanie Listy HTML

Kurs HTML Kurs CSS

- Lekcja

Zagnieżdżanie list HTML

A gdybyśmy tak chcieli dany punkt listy rozwinąć i uzupełnić go o kolejne podpunkty, to jak możemy to osiągnąć? W tym celu musimy zawrzeć jedną listę w drugiej, czynność ta nazywana jest zagnieżdżaniem.

Ale jak to zawrzeć jedną w drugiej, w którym miejscu byśmy ją zawierali? Kolejną listę dodajemy do elementu listy, który ma być rozwinięty i wtedy dany element listy staje się głównym punktem, a lista z zagnieżdżonymi elementami staje się jego podpunktami.

<ol>
  <li>element listy</li>
  <li>element listy
    <ol>
      <li>element listy zagnieżdżonej</li>
      <li>element listy zagnieżdżonej</li>
    </ol>
  </li>
</ol>
  1. element listy
  2. element listy
    1. element listy zagnieżdżonej
    2. element listy zagnieżdżonej

Tytułem danej listy zagnieżdżonej staje się tekst elementu listy, w którym jest ona zagnieżdżona.

Zagnieżdżać możemy wszystkie rodzaje list, mało tego możemy je łączyć ze sobą.

<ol>
  <li>element listy</li>
  <li>element listy
    <ul>
      <li>element listy zagnieżdżonej</li>
      <li>element listy zagnieżdżonej</li>
    </ul>
  </li>
</ol>
  1. element listy
  2. element listy
    • element listy zagnieżdżonej
    • element listy zagnieżdżonej