0Pricing
HTML Academy · Lekcja

Listy nieuporządkowane: ul i li

Tworzyć listy punktowane za pomocą elementów ul i li.

Listy nieuporządkowane: ul i li to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Czym jest lista nieuporządkowana?

Lista nieuporządkowana wyświetla elementy z punktorami — kolejność nie ma znaczenia:

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

Element ul

Element <ul> (lista nieuporządkowana) zawiera listę. Jego bezpośrednimi dziećmi powinny być wyłącznie elementy <li>:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->

Stylowanie punktorów za pomocą CSS

Kontroluj znaczniki listy za pomocą CSS:

ul {
  list-style-type: disc;       /* default: filled circle */
  /* circle, square, none */
}

/* Custom bullet with ::before */
ul li::before {
  content: '→ ';
  color: blue;
}

/* Remove all list styling: */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

Nawigacja jako ul

Menu nawigacyjne jest semantycznie listą odnośników:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Element li może zawierać dowolną treść

Elementy listy mogą zawierać dowolną treść przepływową:

<ul>
  <li>
    <strong>HTML</strong>
    <p>The structure of the web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>The presentation layer.</p>
  </li>
</ul>

Listy w układzie poziomym

Wyświetlaj elementy listy poziomo za pomocą CSS:

<ul class="inline-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<!-- CSS: -->
<!--
.inline-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
-->

Semantyczne zastosowania ul

Typowe semantyczne zastosowania list nieuporządkowanych:

  • Menu nawigacyjne
  • Listy funkcji
  • Chmury tagów
  • Powiązane odnośniki
  • Listy składników w przepisach

ul a p dla wielu elementów

Gdy masz wiele powiązanych elementów, lista jest semantycznie lepszym rozwiązaniem niż osobne akapity:

<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

<!-- Good: -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Znaczniki listy za pomocą list-style-image

Użyj własnego obrazu jako punktora listy:

ul {
  list-style-image: url('/icons/check.svg');
}

/* More reliable: use background-image on li::before */
ul li {
  list-style: none;
  padding-left: 1.5rem;
  background: url('/icons/check.svg') no-repeat left center;
  background-size: 1rem;
}

Skrót list-style

Skrót list-style ustawia typ, położenie i obraz:

ul {
  list-style: square inside;    /* type + position */
  list-style: none;             /* remove bullets */
}

/* list-style-position: inside vs outside */
ul {
  list-style-position: inside;  /* bullet inside padding box */
  /* outside = default, bullet outside text block */
}

Dostępność

Uwagi dotyczące dostępności list:

  • Czytniki ekranu informują o typie listy i liczbie jej elementów
  • Użycie list-style: none może sprawić, że niektóre czytniki ekranu nie ogłoszą listy jako listy — dodaj role="list", aby zachować semantykę
<ul style="list-style: none" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Szybkie sprawdzenie

Jaki element jest jedynym prawidłowym bezpośrednim dzieckiem ul?

Podsumowanie: listy nieuporządkowane

Najważniejsze informacje o listach nieuporządkowanych:

  • <ul> zawiera listę, w której kolejność nie ma znaczenia
  • <li> jest jedynym prawidłowym bezpośrednim dzieckiem
  • Domyślny punktor to disc; można go zmienić za pomocą list-style-type
  • Menu nawigacyjne są semantycznie listami <ul> zawierającymi odnośniki
  • Dodaj role="list", jeśli usuwasz punktory za pomocą CSS

Często zadawane pytania

Czy lekcja „Listy nieuporządkowane: ul i li” jest bezpłatna?

Tak — pełny tekst „Listy nieuporządkowane: ul i li” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Listy nieuporządkowane: ul i li”?

Tworzyć listy punktowane za pomocą elementów ul i li. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Listy nieuporządkowane: ul i li”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Listy nieuporządkowane: ul i li
  2. Listy uporządkowane: ol, start, reversed i type
  3. Listy opisów: dl, dt i dd
  4. Listy zagnieżdżone i stylowanie list
← Powrót do HTML Academy