Aby wybrać właściwy rysunek, trzeba przełożyć fragment HTML na to, co zobaczy użytkownik w przeglądarce. Kluczowa jest kolejność elementów w kodzie oraz ich zagnieżdżenie (rodzic–dziecko), bo przeglądarka renderuje treść zgodnie ze strukturą DOM.
Następnie należy uwzględnić domyślne zachowanie elementów:
- Elementy blokowe (np. akapity, nagłówki, listy) zwykle zaczynają się w nowej linii i "zajmują" całą dostępną szerokość.
- Elementy liniowe (np. fragmenty tekstu) układają się w jednym wierszu, dopóki nie wymusi się złamania.
W praktyce rozwiązywanie takiego zadania wygląda tak:
- Odczytaj, jakie elementy występują (np. tekst, lista, obraz, odnośnik) i w jakiej kolejności.
- Sprawdź, które elementy są w środku innych (np. link wewnątrz listy lub tekst wewnątrz akapitu) – to zmienia układ.
- Porównaj z rysunkami: szukaj zgodności w liczbie wierszy, wcięciach list, obecności punktów/numeracji oraz miejscach, gdzie treść jest w jednej linii.
Dlaczego pozostałe rysunki są błędne? Zwykle pokazują typowe pułapki: pominięcie zagnieżdżenia (element "wychodzi" poza rodzica), nieprawidłowe łamanie wierszy (jakby element blokowy był liniowy), albo inną kolejność wyświetlania niż wynika z kodu. Poprawna odpowiedź jest tą, która jednocześnie zgadza się z DOM i domyślnym renderowaniem HTML.
