Listy nienumerowane <ul> i numerowane <ol>

Kolejne ważne, bo często stosowane w praktyce tagi HTML to listy (numerowane i nienumerowane). Czasem nazywamy je także uporządkowanymi i nieuporządkowanymi. Po jeszcze więcej informacji na temat list odsyłam do czwartego odcinka kursu video (tak naprawdę artykuł ten stanowi pomocne notatki do tegoż epizodu). Zaczynajmy!

Lista nieuporządkowana (nienumerowana)
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>Królestwa Północy
<ul>
<li>Sigismund Dijkstra</li>
<li>Keira Metz</li>
</ul>
</li>
<li>Scoia'tael
<ul>
<li>Iorveth</li>
<li>Isengrim Faoiltiarna</li>
</ul>
</li>
</ol>

Rezultat w przeglądarce:

  1. Królestwa Północy
    • Sigismund Dijkstra
    • Keira Metz
  2. Scoia'tael
    • Iorveth
    • Isengrim Faoiltiarna

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. Zobacz przykład zagnieżdżania list przy budowaniu menu głównego w tym odcinku kursu.

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać: kontakt@pasja-informatyki.pl. Dziękujemy za poświęcony czas - to dzięki Wam serwis staje się coraz lepszy!

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

W dniach od 13.06.2024 do 17.06.2024 trwa w Videopoint.pl promocja urodzinowa - oprócz wielu zniżek mamy też możliwość odebrania darmowego kursu! Można odebrać jeden videokurs z trzech: 1. "Mały szachista"; 2. "Wejście w świat IT"; 3. "Angielski dla inżynierów i techników". Warto korzystać - Zobacz promocję na 9 urodziny Videopoint.pl

Bądź na bieżąco
Pasja informatyki