Lista w HTML to jeden z najczęściej używanych elementów strony internetowej. Pozwala ona na uporządkowanie informacji w sposób łatwy do przeglądania i czytania. W tym artykule omówimy, jak stworzyć listy w HTML oraz przedstawimy kilka przykładów kodu.
Rodzaje list w HTML
W HTML mamy do wyboru trzy rodzaje list: nieuporządkowaną, uporządkowaną oraz zagnieżdżoną.
Lista nieuporządkowana
Lista nieuporządkowana jest używana wtedy, gdy kolejność elementów nie ma znaczenia. W takiej liście każdy element jest oznaczony kropką lub kółkiem. Aby stworzyć listę nieuporządkowaną w HTML, używamy znacznika <ul> oraz <li> do oznaczenia każdego elementu listy. Przykładowy kod wygląda następująco:
<ul> <li>Jabłka</li> <li>Banan</li> <li>Pomarańcze</li> </ul>
Lista uporządkowana
Lista uporządkowana jest używana wtedy, gdy kolejność elementów ma znaczenie. W takiej liście każdy element jest numerowany. Aby stworzyć listę uporządkowaną w HTML, używamy znacznika <ol> oraz <li> do oznaczenia każdego elementu listy. Przykładowy kod wygląda następująco:
<ol> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol>
Lista zagnieżdżona
Lista zagnieżdżona to lista, która zawiera inne listy wewnątrz siebie. Aby stworzyć taką listę, używamy odpowiednio znacznika <ul> lub <ol> i <li> do oznaczenia każdej listy i każdego jej elementu. Przykładowy kod wygląda następująco:
<ul>
<li>Jedzenie</li>
<ul>
<li>Owoce</li>
<ol>
<li>Jabłka</li>
<li>Banan</li>
<li>Pomarańcze</li>
</ol>
<li>Warzywa</li>
<ol>
<li>Marchewka</li>
<li>Cebula</li>
<li>Brokuły</li>
</ol>
</ul>
<li>Napoje</li>
<ul>
<li>Soki</li>
<li>Woda</li>
<li>Herbata</li>
</ul>
</ul>
Podsumowanie
W podsumowaniu warto zwrócić uwagę na to, że listy są bardzo ważnym elementem strony internetowej, który pozwala na uporządkowanie informacji w sposób łatwy do przeglądania i czytania. W HTML mamy do dyspozycji trzy rodzaje list: nieuporządkowaną, uporządkowaną oraz zagnieżdżoną, z których każdy ma swoje zastosowanie w zależności od potrzeb projektu. Aby stworzyć listę w HTML, należy użyć odpowiednich znaczników, takich jak <ul>, <ol> i <li>. Przykłady kodu prezentowane powyżej pokazują, jak można zastosować te znaczniki w praktyce.