W HTML5 wprowadzono wiele nowych elementów semantycznych, m.in. <header>, <nav>, <article> oraz <footer>. W nowoczesnych przeglądarkach mają one zdefiniowane typowe zachowanie w układzie dokumentu (zwykle jako elementy blokowe), więc mogą być stylowane i uczestniczą w przepływie strony tak, jak oczekuje autor.
Problem historycznie pojawiał się w bardzo starych przeglądarkach, które nie obsługiwały HTML5. Takie przeglądarki mogły traktować nieznane elementy w sposób nieprzewidywalny (np. jak elementy liniowe), co prowadziło do "rozsypania" layoutu: menu, nagłówek czy stopka nie zajmowały pełnej szerokości, a marginesy i wymiary nie działały jak dla bloków. Jednym z prostych obejść było jawne zadeklarowanie w CSS:
header, nav, article, footer { display: block; }
To wymuszało na silniku renderującym, by te elementy zachowywały się jak blokowe, dzięki czemu układ strony był stabilniejszy nawet przy słabszym wsparciu HTML5.
Dlaczego pozostałe odpowiedzi są błędne?
- "spełnienia wymogów standardu języka HTML 5." – standard HTML nie wymaga dopisywania takiej reguły CSS; to nie jest warunek "poprawności HTML5", tylko praktyka kompatybilnościowa.
- "zapewnienia poprawnej prezentacji w przeglądarkach na urządzenia mobilne." – reguła nie jest specyficzna dla mobile. Urządzenia mobilne zwykle dość wcześnie wspierały HTML5; problem dotyczył raczej starych wersji przeglądarek desktopowych.
- "spełnienia wymogów standardu języka CSS." – CSS jako standard nie narzuca tworzenia takich reguł. To autor strony decyduje o stylach; tutaj chodzi o zachowanie renderowania w określonych implementacjach przeglądarek.
W praktyce w nowych projektach takie obejścia są coraz rzadziej potrzebne, bo wsparcie HTML5 jest powszechne. Warto jednak rozumieć sens tej reguły, bo bywa spotykana w starszych szablonach oraz w materiałach edukacyjnych dotyczących kompatybilności.
