Listy punktowane <ul> i numerowane <ol>

Kolejne ważne, bo często stosowane w praktyce tagi HTML to listy (numerowane i punktowane). Czasem nazywamy je także uporządkowanymi i nieuporządkowanymi.

Lista nieuporządkowana (punktowana)

z ang. unordered list – jest definiowana przez znaczniki <ul></ul>, zaś pojedynczy element takiej listy zamknięty jest w znacznikach <li></li> - z ang. list item).

Widok w kodzie HTML:

  <ul>
	
    <li>Królestwa Północy</li>
	
    <li>Scoia'tael</li>
	
    <li>Cesarstwo Nilfgaardu</li>

    <li>Skellige</li>

  </ul>

Rezultat w przeglądarce:

• Królestwa Północy
• Scoia'tael
• Cesarstwo Nilfgaardu
• Skellige

Lista uporządkowana (numerowana)

z ang. ordered list – jest definiowana przez znacznik <ol></ol>, zaś pojedynczy element takiej listy również zamknięty jest w znacznikach <li></li>

Widok w kodzie HTML:

<ol>
 
  <li>Królestwa Północy</li>
 
  <li>Scoia'tael</li>

  <li>Cesarstwo Nilfgaardu</li>

  <li>Skellige</li>

</ol>

Rezultat w przeglądarce:

1. Królestwa Północy
2. Scoia'tael
3. Cesarstwo Nilfgaardu
4. Skellige

Zagnieżdżanie list

Oczywiście w niektórych przypadkach zajdzie potrzeba tzw. zagnieżdżenia list, czyli stworzenia listy wewnętrznej wewnątrz znaczników <li></li> listy zewnętrznej. W poniższym przykładzie lista zewnętrzna to lista numerowana, a wewnętrzna to lista nienumerowana (choć równie dobrze można by zagnieździć je odwrotnie):

<ol>

  <li>Matematyka</li>

  <ul>

    <li>algebra</li>

    <li>geometria</li>

  </ul>

  <li>Fizyka</li>

  <ul>

    <li>grawitacja</li>

    <li>magnetyzm</li>

    <li>optyka</li>

  </ul>

 </ol>

Rezultat w przeglądarce:

1. Matematyka
• algebra
• geometria
2. Fizyka
• grawitacja
• magnetyzm
• optyka

Listy to także ważne znaczniki w kontekście egzaminu zawodowego - często pojawiają się tak w części pisemnej jak i w zadaniach praktycznych. Oczywiście równie ważne są w codziennej pracy front-endowca - często na odpowiednio wystylizowanych listach buduje się menu główne witryny. Pomimo, iż takie górne menu wygląda jak pozioma belka, to kiedy zajrzymy do jej trzewi, okazuje się że od strony mechaniki wszystko zbudowane jest na kanwie właśnie listy zagnieżdżonej.