KWALIFIKACJA INF3 - STYCZEŃ 2016

PYTANIE NR 3.
Poniżej przedstawiono fragment kodu języka HTML. Jest on definicją listy:
Ilustracja przedstawia fragment kodu HTML oraz cztery przykłady wynikowego formatowania listy w przeglądarce internetowej.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawna interpretacja wynika z rozróżnienia listy uporządkowanej i nieuporządkowanej oraz ich zagnieżdżania. Numerowane elementy oznaczają listę uporządkowaną, a wypunktowane "podpunkty" to lista nieuporządkowana osadzona wewnątrz elementu listy. Kluczowe jest poprawne odczytanie poziomów hierarchii.

Pełne wyjaśnienie:

W HTML listy opisuje się semantycznie, a nie "wizualnie". Najczęściej spotkasz dwa rodzaje:

  • Lista uporządkowana (numerowana) – tworzona znacznikiem <ol>, a jej elementy to <li>.
  • Lista nieuporządkowana (wypunktowana) – tworzona znacznikiem <ul>, a jej elementy to również <li>.

Jeżeli w kodzie występuje numeracja głównych punktów (np. 1, 2, 3), oznacza to, że na poziomie głównym użyto listy uporządkowanej. Jeżeli w obrębie jednego z punktów pojawiają się podpunkty oznaczane "kropkami" lub innym markerem, to typowo jest to lista nieuporządkowana zagnieżdżona w środku danego elementu <li>.

Dlaczego odpowiedź z numerami i podpunktami jest właściwa? Ponieważ odzwierciedla dwupoziomową (a nawet wielopoziomową) strukturę: główne elementy są uporządkowane, a wewnątrz jednego z nich znajdują się wypunktowane podpozycje. Zagnieżdżenie kolejnej listy w ramach podpunktu tworzy następny poziom hierarchii (podpunkt pod podpunktem).

Dlaczego pozostałe typowe odpowiedzi bywają błędne?

  • Warianty przedstawiające wyłącznie numerację pomijają fakt istnienia zagnieżdżonej listy wypunktowanej.
  • Warianty przedstawiające wyłącznie wypunktowanie ignorują, że na poziomie głównym kolejność jest wyrażona numerami.
  • Warianty spłaszczające strukturę (wszystko na jednym poziomie) wynikają z nieuwzględnienia, że lista może znajdować się wewnątrz elementu <li>, co zmienia poziom wcięcia i marker.

Wskazówka egzaminacyjna: aby poprawnie rozpoznać wynik, skup się na znacznikach <ol>/<ul> i miejscu, w którym pojawiają się <li>. Wcięcia w kodzie pomagają czytać, ale o hierarchii decyduje zagnieżdżenie elementów.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Lista uporządkowana to lista, w której kolejność elementów ma znaczenie (zwykle wyświetlana jako numeracja). W HTML tworzy się ją znacznikiem <ol>, a każdy element listy zapisuje jako <li>.
Lista nieuporządkowana to lista punktowana, gdzie kolejność elementów nie jest kluczowa. W HTML używa się znacznika <ul>, a elementy listy definiuje przez <li>. Marker (kropka/kwadrat) zależy od CSS i przeglądarki.
Zagnieżdżenie polega na umieszczeniu całej listy <ul> lub <ol> wewnątrz elementu <li> listy nadrzędnej. Dzięki temu podpunkty należą do konkretnego punktu, a nie są osobną listą obok.
Wcięcia nie zmieniają znaczenia HTML, ale pomagają zobaczyć hierarchię zagnieżdżeń. Na egzaminie ułatwia to rozpoznanie, które <li> należą do listy głównej, a które do listy wewnętrznej. Semantykę określają znaczniki, nie spacje.
Typowe pomyłki to: wstawienie <ul> obok <li> zamiast w jego środku, pominięcie zamknięć znaczników oraz mieszanie poziomów (spłaszczanie hierarchii). Częsty jest też błąd interpretacji: numeracja ≠ zawsze jeden poziom.
Tak. To standardowy sposób tworzenia podpunktów: w środku <li> możesz umieścić tekst punktu oraz zagnieżdżone <ul> lub <ol>. Przeglądarka wyrenderuje wtedy kolejne poziomy listy z odpowiednimi markerami.
Policz zagnieżdżenia: każdy kolejny <ul> lub <ol> umieszczony wewnątrz <li> tworzy nowy poziom. Wcięcia są tylko wskazówką, więc kluczowe jest śledzenie, gdzie zaczyna i kończy się dana lista.
Listę uporządkowaną stosuje się, gdy kolejność ma znaczenie: instrukcje krok po kroku, procedury, rankingi, numerowane wymagania. Lista punktowana jest lepsza dla zbiorów cech lub elementów bez znaczenia kolejności (np. lista funkcji, narzędzi, linków).
CSS może zmienić markery (np. list-style-type), usunąć je, dodać własne ikonki oraz kontrolować wcięcia i odstępy. To oznacza, że semantyka pozostaje ta sama (<ol>/<ul>), ale wygląd w przeglądarce może być inny niż domyślny.
Ćwicz rozpoznawanie wynikowego układu na podstawie kodu: mieszanie <ol> i <ul>, różne poziomy zagnieżdżeń, poprawne domknięcia <li>. Dobrą metodą jest wklejanie kodu do pliku .html i porównywanie z przewidywanym rezultatem.
info

Statystycznie 68% uczniów zna prawidłową odpowiedź. średnie

Według specjalistów z branży: "Poprawna interpretacja wynika z rozróżnienia listy uporządkowanej i nieuporządkowanej oraz ich zagnieżdżania."

Źródła:

  • MDN Web Docs: "&lt;ol&gt;: The Ordered List element" — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol (dostęp: 2026-03-02)
  • MDN Web Docs: "&lt;ul&gt;: The Unordered List element" — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul (dostęp: 2026-03-02)
  • HTML Living Standard (WHATWG): sekcja "The ol element" oraz "The ul element" — https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element (dostęp: 2026-03-02)

Materiały:

  • Dokumentacja MDN: elementy list &lt;ol&gt;, &lt;ul&gt; i &lt;li&gt;
  • Specyfikacja HTML (WHATWG): sekcja dotycząca list
  • Ćwiczenia praktyczne: tworzenie zagnieżdżonych list w edytorze i obserwacja efektu w przeglądarce

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego