Aby stworzyć listę w HTML, należy skorzystać ze specjalnych znaczników, które umożliwiają tworzenie różnych rodzajów list: numerowanych, nienumerowanych oraz definicyjnych. Poniżej znajduje się kompleksowy poradnik dotyczący zasad tworzenia list w HTML oraz przykładów praktycznego wykorzystania.
Rodzaje list w HTML
HTML udostępnia trzy podstawowe typy list:
- Lista nienumerowana (
<ul>); - Lista numerowana (
<ol>); - Lista definicyjna (
<dl>).
Lista nienumerowana (<ul>)
Lista nienumerowana (punktowana) wyświetla elementy z niewyróżnionymi znacznikami, takimi jak kropki lub inne symbole.
<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
<li>Trzeci element</li>
</ul>
Efekt w przeglądarce:
- Pierwszy element
- Drugi element
- Trzeci element
Zastosowania –
- przedstawianie list funkcji produktu,
- wyliczanie cech lub składników,
- menu nawigacyjne.
Lista numerowana (<ol>)
Lista numerowana (uporządkowana) numeruje kolejne elementy. Podstawowy przykład:
<ol>
<li>Krok pierwszy</li>
<li>Krok drugi</li>
<li>Krok trzeci</li>
</ol>
Efekt w przeglądarce:
- Krok pierwszy
- Krok drugi
- Krok trzeci
Personalizacja numeracji listy
Lista numerowana może mieć różne style numerowania dzięki atrybutowi type oraz można ustawić punkt początkowy atrybutem start.
<ol type="A">
<li>Punkt A</li>
<li>Punkt B</li>
</ol>
Efekt: A. Punkt A
B. Punkt B
<ol type="I" start="3">
<li>Punkt</li>
<li>Punkt</li>
</ol>
Efekt: III. Punkt
IV. Punkt
Zastosowania –
- prezentacja instrukcji krok po kroku,
- listy rankingowe (np. TOP 10),
- harmonogramy i plany działania.
Lista definicyjna (<dl>)
Stosowana do prezentacji par termin-definicja.
<dl>
<dt>HTML</dt>
<dd>Język znaczników służący do tworzenia stron WWW.</dd>
<dt>CSS</dt>
<dd>Język służący do stylizacji elementów HTML.</dd>
</dl>
Efekt: HTML
Język znaczników służący do tworzenia stron WWW.
CSS
Język służący do stylizacji elementów HTML.
Zastosowania –
- słowniki pojęć,
- prezentacje parametrów technicznych,
- wyjaśnienia terminów fachowych.
Zagnieżdżanie list
Listy w HTML można zagnieżdżać, czyli umieszczać jedną listę wewnątrz innej.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend</li>
</ul>
Efekt:
- Frontend
- HTML
- CSS
- JavaScript
- Backend
Taką strukturę stosuje się np. do grupowania kategorii i podkategorii.
Pełny przykład użycia listy w dokumencie HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Jak zrobić listę w HTML?</title>
</head>
<body>
<h1>Lista zakupów</h1>
<ul>
<li>Chleb</li>
<li>Mleko</li>
<li>Masło</li>
</ul>
<h1>Kroki przygotowania ciasta</h1>
<ol>
<li>Przygotuj składniki</li>
<li>Rozgrzej piekarnik</li>
<li>Wymieszaj składniki</li>
<li>Upiecz ciasto</li>
</ol>
<h1>Słownik pojęć</h1>
<dl>
<dt>CPU</dt>
<dd>Centralna jednostka obliczeniowa komputera.</dd>
<dt>HTML</dt>
<dd>Język znaczników stron internetowych.</dd>
</dl>
</body>
</html>
Podsumowanie praktycznych zastosowań
- Menu, nawigacja – zazwyczaj w postaci
- z odpowiednim sformatowaniem przy pomocy CSS;
- Instrukcje krok po kroku – najlepiej prezentować jako
- ;
- Słowniki, FAQ, dokumentacje – stosować
- dla lepszej prezentacji terminów i definicji;
- Listy cech i wyliczenia – stosować
- , gdy kolejność nie jest istotna;
- , gdy kolejność ma znaczenie.
Dodatkowo, listy można stylizować przy pomocy CSS, zmieniając wygląd punktorów, numeracji i formatowania.
Prawidłowe stosowanie list poprawia czytelność, ułatwia nawigację na stronie i pozwala na logiczne uporządkowanie treści.
