Listy <ul>, <ol>, <li>

Listy <ul>, <ol>, <li>

Listy w HTML są przydatnym sposobem na przedstawianie informacji w zorganizowany i czytelny sposób. Mogą być używane do wypunktowywania elementów, tworzenia list numerowanych lub menu nawigacyjnego.

1. Rodzaje list w HTML

W HTML dostępne są dwa podstawowe typy list:

  • Lista nieuporządkowana – <ul>: elementy są oznaczone punktami (bullet points).
  • Lista uporządkowana – <ol>: elementy są numerowane.

2. Lista nieuporządkowana <ul>

Lista nieuporządkowana używa wypunktowania, czyli małych symboli (domyślnie kropek) przed każdym elementem listy. Przykład:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Efekt w przeglądarce:

  • HTML
  • CSS
  • JavaScript

3. Lista uporządkowana <ol>

Lista uporządkowana numeruje elementy. Może być używana np. do wyświetlania kroków w instrukcji.

<ol>
  <li>Zaloguj się na stronie.</li>
  <li>Wybierz produkt z oferty.</li>
  <li>Dokonaj płatności.</li>
</ol>

Efekt w przeglądarce:

  1. Zaloguj się na stronie.
  2. Wybierz produkt z oferty.
  3. Dokonaj płatności.

4. Lista uporządkowana z innym stylem numeracji

Dla list uporządkowanych (<ol>) możesz zmienić styl numeracji za pomocą atrybutu type. Przykład:

<ol type="A">
  <li>Pierwszy punkt</li>
  <li>Drugi punkt</li>
  <li>Trzeci punkt</li>
</ol>

Efekt w przeglądarce:

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

Przeglądarki mogą ignorować atrybut type przy niektórych stylach CSS, np. jeśli mamy zewnętrzne style, które nadpisują wygląd listy.

5. Zagnieżdżone listy

Możesz tworzyć listy wewnątrz innych list, np. podpunkty w głównym punkcie listy:

<ul>
  <li>Front-end
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Back-end
    <ul>
      <li>PHP</li>
      <li>Node.js</li>
    </ul>
  </li>
</ul>

Efekt w przeglądarce:

  • Front-end
    • HTML
    • CSS
    • JavaScript
  • Back-end
    • PHP
    • Node.js

6. Stylowanie list za pomocą CSS

Możesz zmieniać wygląd list za pomocą CSS. Na przykład usuniesz kropki z listy nieuporządkowanej i wyświetlisz elementy listy w jednej linii:

ul {
  list-style-type: none;
  padding: 0;
}

ul li {
  display: inline;
  margin-right: 10px;
}

Efekt w przeglądarce (opis):

  • HTML
  • CSS
  • JavaScript

7. Najczęstsze błędy przy tworzeniu list

  • Pominięcie tagów <li>: Każdy element listy musi być w tagu <li>.
  • Brak zamknięcia listy: Pamiętaj, aby zakończyć listę tagiem </ul> lub </ol>.
  • Źle zagnieżdżone listy: Upewnij się, że zagnieżdżone listy znajdują się wewnątrz elementu <li>, a nie bezpośrednio wewnątrz <ul> lub <ol>.

8. Podsumowanie

Listy HTML pozwalają uporządkować informacje i prezentować je w czytelny sposób. W tej lekcji nauczyłeś się tworzyć listy nieuporządkowane i uporządkowane, zagnieżdżone listy oraz zmieniać style numeracji.

9. Testuj swój kod w JSFiddle

Możesz przetestować poniższy kod w JSFiddle. Wklej go w sekcji HTML i sprawdź, jak działają różne typy list:

<h2>Lista nieuporządkowana</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h2>Lista uporządkowana</h2>
<ol>
  <li>Zaloguj się</li>
  <li>Dodaj produkt do koszyka</li>
  <li>Dokonaj płatności</li>
</ol>

<h2>Zagnieżdżona lista</h2>
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>PHP</li>
      <li>Node.js</li>
    </ul>
  </li>
</ul>
Previous Temat
Back to Zagadnienie
Next Quiz