Jaki rezultat zostanie wyświetlony po wykonaniu przedstawionego kodu HTML?
Rysunek D wynika bezpośrednio ze sposobu renderowania list w HTML przez przeglądarkę. Pierwsza lista to lista uporządkowana, czyli element ol, więc jej główne pozycje są numerowane domyślnie liczbami: 1., 2., 3. W drugiej pozycji tej listy znajduje się zagnieżdżona lista nieuporządkowana, czyli ul. Ponieważ jest ona wstawiona wewnątrz elementu li, staje się częścią punktu numer 2, a nie osobnym fragmentem dokumentu. Przeglądarki zgodne ze standardowymi arkuszami stylów użytkownika zwykle pokazują taką zagnieżdżoną listę ul jako puste kółka, czyli marker typu circle. To właśnie widać na Rys. D. Potem pierwsza lista ol się kończy, więc następna lista zaczyna się niezależnie. Druga lista ma ustawione type='A' oraz start='4', czyli numerowanie literami od czwartej pozycji alfabetu. Czwarta litera to D, dlatego jedyny element tej listy ma znacznik D. Moim zdaniem to bardzo praktyczne pytanie, bo podobne zagnieżdżenia robi się często w regulaminach, menu strony, spisach kroków albo dokumentacjach technicznych. Dobra praktyka jest taka, żeby listę zagnieżdżoną umieszczać wewnątrz konkretnego elementu li, dokładnie tak jak tutaj, bo wtedy struktura dokumentu jest semantycznie poprawna i lepiej rozumiana przez przeglądarki, czytniki ekranowe oraz walidatory HTML.
Najczęstszy błąd przy tym przykładzie polega na patrzeniu tylko na wcięcia w kodzie albo na same napisy „punkt”, zamiast przeanalizować strukturę elementów listy. W HTML o wyglądzie list decyduje przede wszystkim typ listy oraz jej zagnieżdżenie. Element ol tworzy listę uporządkowaną, więc przeglądarka automatycznie nadaje jej kolejne numery. Nie trzeba wpisywać tych numerów ręcznie i nie należy zakładać, że każda następna lista będzie kontynuowała poprzednie numerowanie. Gdy pierwsza lista ol zostaje zamknięta, jej licznik się kończy. Dlatego osobna lista umieszczona później nie jest punktem 4 tej samej listy, tylko nową listą z własnymi atrybutami. W tym kodzie atrybut start='4' przy type='A' oznacza rozpoczęcie numerowania literowego od czwartej litery alfabetu, czyli od D, a nie wyświetlenie liczby 4. To jest taki detal, który łatwo przeoczyć na szybko. Błędne jest też założenie, że lista ul zawsze pokaże pełne czarne kropki. Domyślne style przeglądarek zmieniają marker dla list zagnieżdżonych; ul umieszczone wewnątrz ol zwykle dostaje pusty okrąg, czyli circle. Z mojego doświadczenia wynika, że uczniowie często mylą listę zagnieżdżoną z kolejnym poziomem numerowania w ol, a tutaj wewnętrzna lista jest nieuporządkowana, więc nie ma numerów, tylko znaczniki punktowe. Warto też pamiętać, że poprawne domykanie li ma znaczenie dla czytelności i semantyki dokumentu. Nawet jeśli przeglądarka czasem „naprawi” drobne błędy w HTML, w testach i w prawdziwych projektach lepiej rozumieć rzeczywiste drzewo dokumentu, bo potem CSS, dostępność i automatyczne parsowanie strony działają dużo bardziej przewidywalnie.