W HTML5 semantycznym znacznikiem, który służy do określenia dwóch sekcji widocznych po prawej stronie na rysunku, zawierających wiadomości oraz aktualności, jest
Element <article> w HTML5 został stworzony właśnie do oznaczania niezależnych, samodzielnych treści, które mają sens nawet poza kontekstem strony – czyli takich, które można zamieścić np. w RSS, podlinkować czy udostępnić osobno. W praktyce oznacza to np. pojedyncze wpisy na blogu, wiadomości, ogłoszenia czy aktualności – dokładnie tak jak w tym zadaniu. Dzięki użyciu <article>, osoby korzystające z czytników ekranowych czy wyszukiwarek łatwiej rozpoznają strukturę strony, bo semantyka jest czytelna dla maszyn. Z mojego doświadczenia, stosowanie <article> dla wiadomości i aktualności jest też zgodne z dobrą praktyką tworzenia dostępnych stron – Google nawet sugeruje, by tak wyodrębniać własne, kompletne treści. To ma ogromne znaczenie przy pozycjonowaniu (SEO), bo roboty wyszukiwarek potrafią lepiej rozumieć, co jest główną treścią strony. Dodatkowo, używanie odpowiednich znaczników semantycznych poprawia współpracę z różnymi narzędziami, które analizują układ i zawartość strony, a także ułatwia późniejszą przebudowę lub rozwój projektu. Moim zdaniem, nadanie sekcjom z wiadomościami i aktualnościami znacznika <article> to podstawa nowoczesnego kodowania stron internetowych.
Bardzo często osoby uczące się HTML5 mylą znaczniki semantyczne, szczególnie gdy chodzi o takie elementy jak <nav>, <main>, <footer> czy <article>. To w sumie zrozumiałe, bo na pierwszy rzut oka mogą się wydawać podobne, ale każdy z nich ma swoje konkretne zadanie. <nav> to sekcja nawigacyjna – zawiera odnośniki do innych części serwisu, więc zwykle stosuje się go do menu, bocznych pasków z linkami czy paneli nawigacyjnych. Umieszczenie w <nav> sekcji z wiadomościami czy aktualnościami to klasyczny przykład złego zrozumienia przeznaczenia tego elementu – w praktyce taka struktura zaburza logikę nawigacji i dostępność strony. <main> z kolei oznacza główną i unikalną treść dokumentu, tej, która jest najważniejsza dla danej podstrony. Jednak <main> używamy tylko raz na stronie – nie powinno się go powielać ani używać do oznaczania pojedynczych sekcji, takich jak wiadomości, bo to prowadzi do błędnej interpretacji przez wyszukiwarki i czytniki ekranowe. <footer> odpowiada za stopkę strony lub sekcji, czyli miejsce na informacje jak prawa autorskie, dane kontaktowe, linki do polityk czy podsumowania – wrzucenie tam wiadomości czy aktualności byłoby mocno nielogiczne. Wybierając niewłaściwy znacznik, można popełnić błąd, który potem utrudnia rozwój strony, jej pozycjonowanie czy poprawność dostępności. Najczęstszy błąd to kierowanie się wyglądem, a nie semantyką – a w HTML5 to właśnie semantyka daje najwięcej korzyści na dłuższą metę.