Dokumentacja HTML z przykładami: Listy

Q: Jak zrobić wypunktowanie w HTML?

Użyj listy nienumerowanej: z jednym na każdy punkt, na przykład Milk Eggs . Przeglądarka rysuje punktor przed każdym elementem i dodaje wcięcie listy.

Q: Jak usunąć punktory z listy w HTML?

Ustaw list-style: none na w CSS. Ustaw też padding-inline-start: 0 (albo padding: 0), żeby usunąć wcięcie, które przeglądarka dodaje dla punktorów.

Q: Jak zacząć listę numerowaną od innej liczby?

Użyj atrybutu start: nadaje pierwszemu elementowi numer 5. reversed liczy w dół, a value na ustawia numer tego elementu i kolejnych.

Q: Jak zrobić listę zagnieżdżoną w HTML?

Umieść wewnętrzną lub wewnątrz zewnętrznej listy, po tekście tego elementu. Lista wstawiona bezpośrednio do innej , między elementami , jest niepoprawna.

Listy w HTML: ul, ol i li

HTML ma dwie główne listy. <ul> (unordered list, lista nienumerowana) pokazuje punktory, a <ol> (ordered list, lista numerowana) pokazuje numery. Każdy element to <li> (list item).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

Używaj <ol>, gdy kolejność coś znaczy (kroki, rankingi, spis treści), a <ul>, gdy nie. Czytniki ekranu ogłaszają obie jako listy z liczbą elementów, na przykład "list, 3 items", dlatego prawdziwa lista jest lepsza od linii zaczynających się od wpisanego ręcznie "•" albo "1.".

Lista może bezpośrednio zawierać tylko elementy <li>. Wszystko inne, łącznie z nagłówkami, akapitami i innymi listami, trafia do środka <li>.

Style punktorów

list-style-type na <ul> zmienia punktor. Pseudoelement ::marker stylizuje sam punktor lub numer, niezależnie od tekstu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

Wartość w postaci napisu używa tego tekstu jako punktora. "\2713 " to znak ptaszka i jedna spacja: pierwsza spacja jedynie kończy sekwencję \2713. ::marker przyjmuje tylko kilka właściwości, głównie color, font-size i inne właściwości czcionki, co wystarcza do popularnych "kolorowych punktorów" bez dodatkowego kodu.

Listy numerowane: liczby, litery i cyfry rzymskie

<ol> ma atrybuty do numeracji:

Atrybut	Przykład	Wynik
`type`	`type="a"`	a, b, c (działają też `A`, `i`, `I` i `1`)
`start`	`start="5"`	Zaczyna liczenie od 5
`reversed`	`reversed`	Liczy w dół
`value` (na `<li>`)	`<li value="10">`	Ten element ma numer 10, kolejne liczą dalej od niego

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type jest w porządku w HTML, bo litery mogą mieć znaczenie ("wybierz opcję B"). Przy zmianach czysto wizualnych to samo robi CSS list-style-type: upper-alpha albo lower-roman.

Listy zagnieżdżone

Podlista trafia do <li>, do którego należy, po tekście tego elementu. Przeglądarki zmieniają punktor na każdym poziomie: kółko pełne, potem puste, potem kwadrat.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

Zwróć uwagę, gdzie jest </li>: element "Frontend" zamyka się dopiero po swojej podliście. Zamknięcie go przed <ul> umieszcza podlistę bezpośrednio w zewnętrznej <ul>, co jest niepoprawne, choć wygląda prawie tak samo.

Listy numerowane zagnieżdża się tak samo, a numeracja w każdej podliście zaczyna się od 1. Do numerów w stylu 1.1 i 1.2 potrzebne są liczniki CSS.

Listy opisowe: dl, dt i dd

Lista opisowa łączy terminy z ich opisami: słowniczek, szczegóły zamówienia, pary w stylu FAQ. <dt> to termin, a <dd> opis:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

Termin może mieć kilka <dd>, a kilka <dt> może dzielić jeden <dd>. Przeglądarki domyślnie dodają wcięcie do <dd>; powyższa reguła margin je usuwa. Dla danych w kilku kolumnach lepiej sprawdzi się tabela.

Menu nawigacyjne to listy linków. Usuń punktory przez list-style: none i wcięcie przez padding: 0, a potem ułóż elementy w rzędzie za pomocą flexboxa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

Dla czytników ekranu to nadal lista ("navigation, list, 3 items"). Jeden wyjątek: Safari z VoiceOver może pominąć znaczenie listy, gdy punktory są usunięte. Jeśli liczba elementów jest ważna dla twoich użytkowników, dodaj role="list" do <ul>.

Domyślne odstępy

Przeglądarki dają listom górny i dolny margines 1em oraz wcięcie padding-inline-start: 40px, w którym stoją punktory. Padding jest po stronie początku, więc w językach pisanych od prawej do lewej punktory i wcięcie same przechodzą na drugą stronę. Usuń padding, a punktory wyjdą poza pole listy, gdzie mogą zostać ucięte; zostaw trochę paddingu albo użyj list-style-position: inside.

Częste błędy

<li> bez listy nadrzędnej. Musi być wewnątrz <ul>, <ol> albo <menu>.
Lista zagnieżdżona poza swoim <li>. Umieść podlistę wewnątrz elementu, do którego należy.
Tekst lub inne znaczniki bezpośrednio w <ul>, na przykład <ul><p>Note</p><li>...</li></ul>. Przenieś je do <li> albo poza listę.
Ręczne wpisywanie punktorów lub numerów przez • i <br>. Czytniki ekranu słyszą akapit, a nie listę.
list-style: none bez padding: 0, co zostawia tajemnicze wcięcie na 40 pikseli.
Używanie <ol> dla wyglądu. Jeśli kolejność nie ma znaczenia, użyj <ul> i ostyluj ją.

Najczęściej zadawane pytania

Jak zrobić wypunktowanie w HTML?

Użyj listy nienumerowanej: <ul> z jednym <li> na każdy punkt, na przykład <ul><li>Milk</li><li>Eggs</li></ul>. Przeglądarka rysuje punktor przed każdym elementem i dodaje wcięcie listy.

Czym różni się ul od ol?

<ul> to lista nienumerowana, pokazywana z punktorami, dla elementów, których kolejność nie ma znaczenia. <ol> to lista numerowana, pokazywana z numerami, dla kroków i rankingów, w których kolejność się liczy. Obie zawierają elementy <li>.

Jak usunąć punktory z listy w HTML?

Ustaw list-style: none na <ul> w CSS. Ustaw też padding-inline-start: 0 (albo padding: 0), żeby usunąć wcięcie, które przeglądarka dodaje dla punktorów.

Jak zacząć listę numerowaną od innej liczby?

Użyj atrybutu start: <ol start="5"> nadaje pierwszemu elementowi numer 5. reversed liczy w dół, a value na <li> ustawia numer tego elementu i kolejnych.

Jak zrobić listę zagnieżdżoną w HTML?

Umieść wewnętrzną <ul> lub <ol> wewnątrz <li> zewnętrznej listy, po tekście tego elementu. Lista wstawiona bezpośrednio do innej <ul>, między elementami <li>, jest niepoprawna.

Powiązane zagadnienia