0Pricing
HTML Academy · Lekcja

Listy uporządkowane: ol, start, reversed i type

Tworzyć listy numerowane i dostosowywać ich kolejność.

Listy uporządkowane: ol, start, reversed i type to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 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 uporządkowana?

Lista uporządkowana wyświetla elementy, których kolejność ma znaczenie:

<ol>
  <li>Install Node.js</li>
  <li>Create project folder</li>
  <li>Run npm init</li>
  <li>Install dependencies</li>
</ol>

Element ol

Element <ol> (lista uporządkowana) domyślnie wyświetla elementy listy z kolejnymi numerami:

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->

Atrybut start

Atrybut start ustawia numer początkowy:

<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>

<ol start="4">
  <li>Configure the database</li>
  <li>Set environment variables</li>
  <li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->

Atrybut reversed

Atrybut reversed powoduje odliczanie w dół zamiast w górę:

<!-- Top 3 countdown -->
<ol reversed>
  <li>Bronze: 95 points</li>
  <li>Silver: 98 points</li>
  <li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->

Atrybut type

Atrybut type zmienia styl znacznika:

<ol type="1">...</ol>   <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol>   <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol>   <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol>   <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol>   <!-- I, II, III (uppercase Roman) -->

type w CSS a HTML

Zamiast atrybutu HTML type preferuj CSS list-style-type:

<!-- HTML type (still valid): -->
<ol type="A">
  <li>Option A</li>
</ol>

<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
  list-style-type: upper-alpha;
}
-->
<ol class="lettered">
  <li>Option A</li>
</ol>

Atrybut value elementu li

Zastąp numer poszczególnych elementów listy za pomocą atrybutu value:

<ol>
  <li>First item</li>
  <li value="10">Tenth item</li>   <!-- jumps to 10 -->
  <li>Eleventh item</li>            <!-- continues: 11 -->
</ol>

Zagnieżdżone ol i ul

Listy można zagnieżdżać — można łączyć listy uporządkowane i nieuporządkowane:

<ol>
  <li>
    Install tools
    <ul>
      <li>VS Code</li>
      <li>Node.js</li>
    </ul>
  </li>
  <li>Create project</li>
  <li>Write code</li>
</ol>

Przypadki zastosowań semantycznych

Używaj <ol>, gdy kolejność ma znaczenie:

  • Instrukcje krok po kroku
  • Wyniki uporządkowane według rankingu (listy top 10)
  • Sekcje dokumentów prawnych
  • Kroki przepisu
  • Spis treści z ponumerowanymi sekcjami

counter-reset w CSS

Liczniki CSS zapewniają pełną kontrolę nad stylem numerowania listy:

ol {
  list-style: none;
  counter-reset: step;
}

ol li {
  counter-increment: step;
}

ol li::before {
  content: 'Step ' counter(step) ': ';
  font-weight: bold;
  color: #0070f3;
}

ol dla nawigacji okruszkowej

Nawigacja okruszkowa jest semantycznie listą uporządkowaną:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li><span aria-current="page">HTML Lists</span></li>
  </ol>
</nav>

Szybkie sprawdzenie

Który atrybut sprawia, że element ol odlicza wstecz?

Podsumowanie: listy uporządkowane

Najważniejsze informacje o listach uporządkowanych:

  • <ol> — lista kolejnych elementów, w której kolejność ma znaczenie
  • start — rozpoczyna numerowanie od niestandardowego numeru
  • reversed — powoduje odliczanie w dół
  • type — zmienia znacznik: 1, a, A, i, I
  • value w elemencie <li> — zastępuje numer pojedynczego elementu
  • Używaj CSS list-style-type i liczników, aby uzyskać większą kontrolę

Często zadawane pytania

Czy lekcja „Listy uporządkowane: ol, start, reversed i type” jest bezpłatna?

Tak — pełny tekst „Listy uporządkowane: ol, start, reversed i type” 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 uporządkowane: ol, start, reversed i type”?

Tworzyć listy numerowane i dostosowywać ich kolejność. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Listy uporządkowane: ol, start, reversed i type”?

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