Która z przedstawionych grup znaczników HTML zawiera znaczniki służące do grupowania elementów i tworzenia struktury dokumentu?
A. table, tr, td
B. br, img, hr
C. div, article, header
D. span, strong, em
Pytanie z egzaminu CKE, styczeń 2021 (arkusz EE.09-SG-21.01).
Odpowiedź div, article, header jest właściwa, bo te znaczniki służą do budowania układu i logicznej struktury dokumentu HTML. div jest ogólnym kontenerem blokowym, używanym wtedy, gdy potrzebujemy pogrupować elementy, np. sekcję formularza, kafelek produktu albo obszar strony do ostylowania w CSS. article ma już znaczenie semantyczne: oznacza samodzielny fragment treści, taki jak wpis blogowy, news, komentarz czy karta artykułu. header natomiast grupuje treści nagłówkowe, na przykład logo, tytuł strony, menu lub wprowadzenie do sekcji. W HTML5 i aktualnym standardzie WHATWG zaleca się stosować znaczniki semantyczne tam, gdzie faktycznie opisują rolę treści, bo pomaga to w dostępności, SEO i czytelności kodu. Moim zdaniem to jedna z tych rzeczy, które odróżniają stronę sklejoną tylko wizualnie od strony napisanej porządnie. W praktyce dobry układ wygląda tak: header na górę strony, article dla niezależnego wpisu, a div jako pomocniczy kontener do siatki, stylowania albo grupowania elementów, gdy nie ma lepszego znacznika semantycznego.
W tym pytaniu łatwo pomylić znaczniki, które coś wyświetlają albo formatują, ze znacznikami odpowiedzialnymi za strukturę dokumentu. br, img i hr pełnią konkretne, pojedyncze funkcje: br wstawia przełamanie wiersza, img osadza obraz, a hr tworzy tematyczny separator. To nie są kontenery, więc nie służą do grupowania innych elementów ani do budowania większego układu strony. Takie znaczniki często nazywa się pustymi, bo nie mają typowej zawartości między znacznikiem otwierającym i zamykającym. table, tr i td rzeczywiście tworzą pewną strukturę, ale jest to struktura tabelaryczna, przeznaczona do danych w wierszach i kolumnach. Używanie tabel do layoutu całej strony było kiedyś spotykane, ale dziś jest to zła praktyka, bo utrudnia responsywność, dostępność i utrzymanie kodu. span, strong i em działają głównie w obrębie tekstu. span jest neutralnym kontenerem liniowym, a strong i em nadają znaczenie tekstowi, odpowiednio ważność oraz akcent. Nie budują one głównych sekcji dokumentu. Typowy błąd myślowy polega na tym, że jeśli znacznik jakoś obejmuje tekst lub element, to od razu traktuje się go jako narzędzie do struktury strony. W nowoczesnym HTML warto jednak rozróżniać kontenery układu, semantyczne sekcje i znaczniki typograficzne. Do grupowania oraz organizowania większych części dokumentu najlepiej pasują div, article i header.