Poniżej przedstawiono fragment kodu języka HTML:
<ol>
<li>punkt 1</li>
<li>punkt 2</li>
<ul>
<li>podpunkt1</li>
<li>podpunkt2</li>
<li>podpunkt3</li>
</ul>
<li>punkt3</li>
</ol>
Jak przeglądarka wyświetli ten fragment?
Wybrana odpowiedź odpowiada temu, jak w tym zadaniu należy odczytać podany fragment HTML: lista ol numeruje elementy li, więc „punkt 1” i „punkt 2” dostają numery 1 oraz 2. Potem w kodzie pojawia się lista ul, czyli lista nieuporządkowana, która wyświetla swoje elementy jako podpunkty. W treści odpowiedzi nie widać typowych kropek listy wypunktowanej, ale sens jest taki, że „podpunkt1”, „podpunkt2” i „podpunkt3” należą do listy ul. „punkt3” pojawia się dalej jako osobna pozycja po tej wstawionej liście. Ważna rzecz: ten kod nie jest napisany zgodnie z dobrą praktyką HTML, bo lista ul została wstawiona bezpośrednio do ol, a poprawnie powinna znajdować się wewnątrz elementu li, np. jako podlista punktu 2. Standardowo zawartością ol powinny być elementy li, a nie bezpośrednio ul. Moim zdaniem to jest właśnie najważniejsza lekcja z tego pytania: przeglądarka często „jakoś” pokaże nawet niepoprawny kod, ale w projekcie strony lepiej pisać strukturę semantycznie poprawną. Poprawny zapis byłby mniej więcej taki: ol zawiera li „punkt 1”, potem li „punkt 2”, a w tym drugim li znajduje się ul z trzema podpunktami, następnie osobny li „punkt3”. Dzięki temu walidator HTML nie zgłasza błędu, CSS łatwiej styluje listę, a czytniki ekranowe lepiej rozumieją strukturę dokumentu.
W niepoprawnych odpowiedziach pojawiają się typowe pomyłki związane z tym, jak działają listy w HTML. Najczęściej ktoś zakłada, że skoro na początku jest lista ol, to każdy następny widoczny element będzie automatycznie numerowany. Tak to jednak nie działa w sensie semantycznym. Numerowane są elementy li należące do listy uporządkowanej, natomiast elementy umieszczone w ul tworzą listę nieuporządkowaną, czyli zwykle wypunktowaną. Dlatego podpunkty nie powinny stać się elementami numerowanymi głównej listy. Inny błąd to przesunięcie całej listy ul dopiero po „punkt3”, jakby przeglądarka najpierw zebrała wszystkie elementy li z ol, a dopiero później pokazała ul. Przeglądarka renderuje dokument w kolejności wynikającej z drzewa HTML, więc miejsce wpisania listy w kodzie ma znaczenie. Jeżeli ul występuje między „punkt 2” a „punkt3”, to wizualnie też pojawi się pomiędzy nimi. Trzeba też uważać na odpowiedzi, w których znika numerowanie całej listy. Sam znacznik ol oznacza listę uporządkowaną, więc pierwsze elementy li będą prezentowane z numerami, a nie jako zwykły tekst. Warto zapamiętać jeszcze jedną praktyczną rzecz: ten przykład jest trochę podchwytliwy, bo kod nie jest wzorcowo poprawny. Lista ul nie powinna być bezpośrednim dzieckiem ol, tylko powinna siedzieć wewnątrz konkretnego li. Z mojego doświadczenia takie błędy potem mocno przeszkadzają przy CSS, bo marginesy, wcięcia i znaczniki listy mogą zachowywać się inaczej niż zakładamy. Najbezpieczniej jest pisać listy zagnieżdżone zgodnie ze strukturą: element listy, a dopiero w nim podlista.