Cześć! Jeśli budujesz stronę i chcesz szybko stworzyć listę zadań, menu nawigacyjne lub instrukcję krok po kroku, to tag <li> jest Twoim najlepszym sprzymierzeńcem. <li> definiuje pojedynczy punkt listy w <ul> lub <ol> i nie występuje samodzielnie.
W tym przewodniku przejdziesz od podstaw do praktycznych trików. Oto, co dokładnie omówimy:
- składnia – jak poprawnie tworzyć elementy w
<ul>i<ol>; - atrybuty numeracji – użycie
typeistartw<ol>; - zagnieżdżanie – budowanie hierarchii list i menu wielopoziomowych;
- stylowanie CSS –
list-style, pseudo-elementy, Flexbox/Grid; - integracja z JavaScript – dodawanie, usuwanie i filtrowanie elementów listy;
- najlepsze praktyki – semantyka, dostępność, wydajność i typowe pułapki.
Podstawy tagu <li>: co to jest i do czego służy?
<li> to element listy (list item), renderowany domyślnie jako punktor w <ul> lub numer w <ol>. To ważny element dla dostępności i SEO, ponieważ screen readery rozpoznają go jako punkt listy, a wyszukiwarki premiują przejrzystą strukturę treści.
Ważne: <li> musi być dzieckiem <ul>, <ol> lub rzadziej <menu> – nie używaj go poza tymi kontenerami.
Składnia podstawowa
Najprostsza lista nieuporządkowana wygląda tak:
<ul>
<li>Pierwszy punkt listy</li>
<li>Drugi punkt z <strong>pogrubieniem</strong></li>
<li>Trzeci punkt z linkiem: <a href="#sekcja">Przejdź</a></li>
</ul>
Analogicznie tworzymy listę uporządkowaną (kroki):
<ol>
<li>Krok 1: Przygotuj składniki</li>
<li>Krok 2: Wymieszaj</li>
<li>Krok 3: Piecz 30 minut</li>
</ol>
Typy list: uporządkowane i nieuporządkowane
W <ol> możesz zmieniać styl numeracji atrybutem type, a punkt startowy atrybutem start. Oto przykłady:
<ol type="1">
<!-- Domyślne cyfry -->
<li>Punkt 1</li>
<li>Punkt 2</li>
</ol>
<ol type="I">
<!-- Rzymskie wielkie -->
<li>Punkt I</li>
<li>Punkt II</li>
</ol>
<ol type="i">
<!-- Rzymskie małe -->
<li>Punkt i</li>
<li>Punkt ii</li>
</ol>
<ol type="A">
<!-- Litery wielkie -->
<li>Punkt A</li>
<li>Punkt B</li>
</ol>
<ol type="a" start="3">
<!-- Litery małe, start od "c" -->
<li>Punkt c</li>
<li>Punkt d</li>
</ol>
W <ul> domyślnie otrzymasz kropki, ale przy pomocy CSS z łatwością zmienisz je na własne znaczniki lub usuniesz.
Zagnieżdżanie list: hierarchia jak w menu
Zagnieżdżając <ul> lub <ol> wewnątrz <li>, budujesz wielopoziomową strukturę idealną do menu, spisów treści czy FAQ. Oto przykład prostego menu nawigacyjnego:
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li>
<a href="#produkty">Produkty</a>
<ul>
<li><a href="#laptopy">Laptopy</a></li>
<li><a href="#telefony">Telefony</a></li>
</ul>
</li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
Analogicznie możesz tworzyć listy definicji, pamiętając, że <li> nie występuje w <dl>:
<dl>
<dt>HTML</dt>
<dd>Język znaczników.</dd>
</dl>
Stylowanie <li> w CSS: od basic po pro
Kolorowanie punktów i tekstu (trick ze <span>)
Aby zmienić kolor znacznika listy niezależnie od koloru tekstu, owiń treść w <span> i steruj kolorem na elemencie <li> oraz wewnątrz <span>:
<ul style="color: red;">
<li><span style="color: black;">Czerwony punktor, czarny tekst</span></li>
<li><span style="color: black;">Inny punkt</span></li>
</ul>
<ul>
<li style="color: red;"><span style="color: black;">Czerwony punkt 1</span></li>
<li style="color: green;"><span style="color: black;">Zielony punkt 2</span></li>
</ul>
Zaawansowane sterowanie znacznikami: list-style i pseudo-elementy
Tak wyłączysz domyślne punktory i dodasz własną ikonę przed każdym <li>:
ul {
list-style: none; /* usuń punktor */
padding: 0;
}
li {
padding: 10px;
background: #f0f0f0;
margin: 5px 0;
position: relative;
}
li::before {
content: "→"; /* niestandardowa ikona */
color: #007bff;
font-weight: bold;
margin-right: 10px;
}
Dla list numerowanych użyj list-style-type: decimal lub mechanizmów counter-reset/counter-increment do customowej numeracji.
Responsywne menu z Flexbox/Grid
Prosty poziomy układ elementów menu z wykorzystaniem Flexboxa:
nav ul {
display: flex;
list-style: none;
gap: 15px;
padding: 0;
}
nav li {
margin: 0;
}
Integracja z JavaScript: dynamiczne listy
JavaScript pozwala dynamicznie dodawać, usuwać i filtrować elementy <li>, dzięki czemu listy stają się interaktywne. Oto minimalna lista z przyciskiem „Dodaj”:
<ul id="todo">
<li>Zrób kawę</li>
</ul>
<input type="text" id="newItem" />
<button onclick="addItem()">Dodaj</button>
<script>
function addItem() {
const input = document.getElementById('newItem');
const value = input.value.trim();
if (!value) return;
const li = document.createElement('li');
li.textContent = value;
document.getElementById('todo').appendChild(li);
input.value = '';
}
</script>
Prosty filtr ukrywający elementy niepasujące do zapytania:
function filterList(query) {
const items = document.querySelectorAll('#lista li');
items.forEach(li => {
li.style.display = li.textContent.toLowerCase().includes(query.toLowerCase())
? 'list-item'
: 'none';
});
}
Najlepsze praktyki i pułapki
Poniższe zasady pomogą Ci pisać semantyczny, dostępny i wydajny kod z <li>:
- semantyka – używaj
<li>wyłącznie wewnątrz<ul>,<ol>lub<menu>; nie zastępuj nimi<div>; - dostępność – w typowej nawigacji polegaj na natywnej semantyce
<nav><ul><li>; role ARIA (np.role="menuitem") stosuj tylko dla menu aplikacyjnych; - wydajność – ogranicz głębokość zagnieżdżeń (najlepiej do 2–3 poziomów), aby nie komplikować nawigacji;
- responsywność – stosuj Flexbox/Grid na kontenerze
<ul>, by elementy skalowały się na różnych ekranach; - stylowanie – unikaj bezpośredniej zmiany koloru na
<li>, jeśli chcesz niezależnie kontrolować znacznik i tekst; użyj wewnętrznego<span>; - alternatywy – do słownikowych par używaj
<dl><dt><dd>; listy narzędziowe rozważ w<menu>(rzadziej spotykane).
Przykład w akcji: mini-strona z menu i listą kroków
Poniżej znajdziesz kompletny, prosty szkielet strony wykorzystujący <li> w menu i liście kroków:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Przykład list z <li></title>
<style>
body { font-family: system-ui, sans-serif; margin: 0; }
header { background: #0d6efd; color: #fff; padding: 12px 20px; }
nav ul { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
nav li { padding: 6px 0; }
main { padding: 20px; }
.kroki { list-style: decimal; padding-left: 20px; }
.kroki li { margin: 6px 0; }
</style>
</head>
<body>
<header>
<nav aria-label="Główne menu">
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#oferta">Oferta</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<h1>Szybki start z listami</h1>
<ol class="kroki">
<li>Utwórz <ul> lub <ol>;</li>
<li>Dodaj elementy <li> z treścią;</li>
<li>Ostyluj listę i elementy według potrzeb.</li>
</ol>
</main>
</body>
</html>