Jak przeglądarka wyświetli przedstawiony kod HTML?
<ul> <li>owoce <ol> <li>jabłko</li> <li>gruszka</li> </ol> </li> <li>warzywa <ol> <li>marchew</li> <li>burak</li> </ol> </li> </ul>
<ul> daje punktory, a każda pozycja ma własną listę numerowaną od 1.<ul>, więc owoce i warzywa mają punktory, a nie numery.<ol>, więc każda liczy od 1 pod swoją pozycją.<ol> leżą wewnątrz <li>, więc są wcięte o poziom głębiej.Zewnętrzna lista <ul> jest wypunktowana, więc owoce i warzywa dostają punktory. Każda z tych pozycji ma w środku własną listę <ol>, czyli numerowaną, wyświetlaną z wcięciem. Numeracja liczy się osobno w każdej liście, dlatego zarówno jabłko, jak i marchew mają numer 1, a gruszka i burak numer 2.
Zagnieżdżona lista stoi wewnątrz elementu <li>, do którego należy, przed jego zamknięciem. Gdyby wpisać ją poza <li>, bezpośrednio w <ul>, walidator zgłosiłby błąd. Numerację można zmienić atrybutami, np. <ol start="5"> zaczyna od 5, a <ol type="a"> używa liter.
Takie zagnieżdżanie list często stosuje się w menu nawigacyjnych.
Każdy z błędnych opisów gubi jedną z cech kodu. Opis z ponumerowanymi owocami i warzywami zamienia typy list: numery należą do <ol>, a tu zewnętrzną listę otwiera <ul>, więc główne pozycje mają punktory.
Sześć pozycji bez wcięć oznaczałoby jedną płaską listę. Tymczasem listy <ol> siedzą wewnątrz elementów <li>, więc przeglądarka pokazuje je o poziom głębiej, z wcięciem.
Wspólna numeracja od 1 do 4 pod warzywami zakłada, że obie wewnętrzne listy tworzą jedną. Są jednak dwie osobne: pierwsza kończy się znacznikiem </ol> jeszcze wewnątrz pozycji owoce, druga zaczyna się w pozycji warzywa i liczy od nowa. Stąd w wyniku dwie krótkie listy numerowane od 1.
Analizując zagnieżdżone listy, warto rysować na kartce wcięcia i zaznaczać, gdzie kończy się każdy znacznik zamykający danej listy.