Znacznik <li> w HTML służy do definiowania pojedynczego elementu listy – stąd jego nazwa pochodzi od angielskich słów list item. Używa się go wyłącznie wewnątrz struktur listowych, takich jak <ul> (lista nieuporządkowana) oraz <ol> (lista uporządkowana).
Podstawowe zastosowanie <li>
Element <li> umieszcza się zawsze jako dziecko znacznika listy. Każdy taki element tworzy jeden punkt na liście, który może zawierać tekst, inne znaczniki HTML, a nawet zagnieżdżone listy.
Przykład – lista nieuporządkowana
<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
<li>Trzeci element</li>
</ul>
W przeglądarce powyższy kod zostanie wyświetlony jako lista wypunktowana (każdy punkt oznaczony kropką).
Przykład – lista uporządkowana
<ol>
<li>Pierwszy krok</li>
<li>Drugi krok</li>
<li>Trzeci krok</li>
</ol>
Tu każdy punkt otrzyma automatycznie numerację (1, 2, 3 itd.).
Typy list z użyciem <li>
- Lista nieuporządkowana (
<ul>) – typowa lista z wypunktowaniem (kropki, kwadraty, inne symbole); - Lista uporządkowana (
<ol>) – lista z numeracją (cyfry, litery, rzymskie cyfry); - Lista zagnieżdżona – element
<li>może zawierać własną listę
Przykład.
<ul>
<li>Owoc
<ul>
<li>Jabłko</li>
<li>Pomarańcza</li>
</ul>
</li>
<li>Warzywo</li>
</ul>
Właściwości i możliwości
- Każdy element
<li>jest prezentowany jako osobny wiersz; - Można zawierać w nim dowolne treści – tekst, obrazki, linki, inne znaczniki HTML,
- Stosowanie
<li>wyłącznie wewnątrz<ul>lub<ol>gwarantuje poprawność składni HTML.
Przykładowe zastosowania <li>
- Menu nawigacyjne –
<ul>
<li><a href="/">Strona główna</a></li>
<li><a href="/uslugi">Usługi</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
- Instrukcje krok po kroku –
<ol>
<li>Włącz komputer</li>
<li>Uruchom przeglądarkę</li>
<li>Przejdź na stronę poradnika</li>
</ol>
Stylizacja <li> za pomocą CSS
Każdy element <li> można dowolnie stylizować. Przykład – zmiana koloru tekstu:
li { color: green; }
Można również modyfikować sam wygląd wypunktowania lub numeracji, np.:
ul { list-style-type: square; }
ol { list-style-type: lower-roman; }
Częste błędy
- Umieszczanie
<li>poza strukturą listy (bez otaczającego<ul>lub<ol>) – taki kod jest niepoprawny w HTML, - Niezamykanie tagów – dla przejrzystości i kompatybilności zawsze zamykaj każdy tag
<li>.
Podsumowanie
Znacznik <li> to podstawowy budulec wszelkich list HTML, kluczowy zwłaszcza w strukturach nawigacyjnych, instrukcjach i porządkowaniu informacji na stronie. Pozwala tworzyć przejrzyste, logiczne i łatwe do stylizowania listy, które poprawiają czytelność i funkcjonalność serwisów internetowych.
