W języku HTML zdefiniowano listę, która <ol>
<li>biały</li>
<li>czerwony
<ul>
<li>różowy</li>
<li>pomarańczowy</li>
</ul></li>
<li>niebieski</li>
</ol>
To pytanie świetnie pokazuje, jak w HTML można łączyć różne typy list, czyli listy numerowane (<ol>) oraz punktowane (<ul>). W tym przypadku mamy główną listę numerowaną, gdzie każdy element to <li>. Jednym z tych elementów jest „czerwony”, pod którym zagnieżdżono listę punktowaną z dwoma podpunktami („różowy”, „pomarańczowy”). Taki sposób strukturyzowania treści w HTML to całkowicie zgodna ze specyfikacją praktyka – właśnie dzięki kombinowaniu <ol> i <ul> można czytelnie przedstawiać np. instrukcje czy hierarchiczne zestawienia. Moim zdaniem to jedno z najprostszych, a zarazem najbardziej efektywnych narzędzi do prezentowania hierarchii – nie tylko na stronach technicznych, ale nawet w prostych notatkach. Przeglądarki zawsze renderują <ol> jako listę numerowaną, a <ul> jako wypunktowaną, więc użytkownik końcowy od razu widzi, co jest ważniejsze, a co podrzędne. Takie zagnieżdżenie list to w branży webowej chleb powszedni – np. instrukcje krok po kroku, gdzie niektóre kroki mają dodatkowe podpunkty. Warto pamiętać, że trzymanie się tej struktury i nie mieszanie porządkowania (np. nie zamieniać miejscami <ol> i <ul> bez powodu) ułatwia późniejszą edycję i utrzymanie kodu, co w większych projektach bardzo doceni każdy programista. Sam często stosuję takie rozwiązania i naprawdę nie ma tu lepszej praktyki, jeśli chodzi o przejrzystość kodu HTML.
Analizując zadanie, można łatwo przeoczyć, jak przeglądarka interpretuje zagnieżdżone listy w HTML. Wiele osób zakłada, że każda lista <ul> i <ol> działa identycznie, niezależnie od kontekstu, a to niestety częsty błąd. Jeśli myśli się, że całość wygląda jako lista punktowana z zagłębioną numerowaną, to znak, że pomieszano kolejność znaczników. Zgodnie ze standardem, <ol> zawsze daje numerowanie głównych elementów, a <ul> – wypunktowanie podrzędnych. Nie ma tu domyślnego przestawiania typów list przez przeglądarkę. Twierdzenie, że lista nie ma zagłębień i wyświetla 5 punktów, ignoruje fakt, że zagnieżdżone <ul> są wyraźnie widoczne jako podlista, a <li> w <ol> nie jest dzielone automatycznie na więcej numerów – każdy <li> to kolejny numer. Przy odpowiedzi sugerującej, że „niebieski” jest piąty, pominięto, że zagnieżdżone <li> w <ul> nie zwiększają liczby pozycji głównej listy numerowanej – są po prostu podpunktami drugiego poziomu. To typowy błąd polegający na traktowaniu wszystkich elementów <li> jako jednej płaskiej listy, a tak HTML nie działa. W programowaniu webowym bardzo ważne jest rozumienie tej hierarchii, bo właściwe zagnieżdżanie pozwala na zachowanie porządku w strukturze dokumentów i poprawne wyświetlanie treści. Dobre praktyki mówią, żeby zawsze pilnować, gdzie zaczynamy i kończymy kolejne listy oraz jaki typ listy stosujemy, bo to ma wpływ na czytelność i dostępność strony. Z mojego doświadczenia wynika, że zrozumienie tej różnicy bardzo pomaga potem w pracy z bardziej zaawansowanymi strukturami, np. nawigacją czy dynamicznymi listami w JavaScript.