Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

W tym pytaniu łatwo się pomylić, bo kilka znaczników HTML5 kojarzy się z układem strony i ktoś intuicyjnie może uznać, że nadają się na nawigację. Warto jednak odróżnić semantykę poszczególnych elementów. Element <main> służy do oznaczenia głównej, unikalnej treści dokumentu – tej, która jest kluczowa dla danej podstrony. Zgodnie z dobrymi praktykami nie umieszcza się w nim stałych elementów interfejsu takich jak menu nawigacyjne, nagłówek czy stopka. Czytniki ekranu często pozwalają użytkownikowi pominąć nagłówek i nawigację, żeby od razu przejść do <main>. Gdybyśmy w <main> wrzucili menu, to trochę psujemy cały sens tej semantyki. Znacznik <aside> z kolei jest przeznaczony na treści poboczne, uzupełniające względem głównego wątku strony: boczne panele, bloki z reklamami, listy powiązanych artykułów, krótkie notki. Owszem, w realnych projektach zdarza się, że w panelu bocznym jest jakieś dodatkowe menu kategorii i bywa ono umieszczone w <aside>. Jednak sam <aside> nie jest semantycznie „obszarem nawigacji” – jest raczej kontenerem na treści dodatkowe. Jeśli w nim znajduje się nawigacja, to i tak powinniśmy ją owinąć w <nav>, żeby zachować właściwą semantykę. Element <header> często myli się z nawigacją, bo w praktyce w nagłówku strony bardzo często umieszcza się logo i menu główne. Jednak <header> opisuje obszar nagłówkowy dokumentu lub sekcji, czyli może zawierać tytuł, podtytuł, logo, czas publikacji, a także właśnie blok <nav>. To nie jest znacznik dedykowany nawigacji, tylko ogólny kontener nagłówkowy. Z punktu widzenia standardów HTML5 poprawna struktura to raczej <header><div class="logo">…</div><nav>…</nav></header>, a nie traktowanie całego headera jako nawigacji. Typowym błędem myślowym jest utożsamianie „tego, co jest wizualnie u góry strony” z nawigacją w sensie semantycznym. HTML5 kładzie duży nacisk na znaczenie elementów, a nie tylko na ich wygląd. Dlatego nawigacja powinna być oznaczona konkretnie znacznikiem <nav>. Dzięki temu przeglądarki, narzędzia SEO, czytniki ekranu i różne biblioteki JavaScript mogą jednoznacznie rozpoznać, gdzie jest menu strony, a gdzie główna treść, nagłówek czy boczne panele. W praktyce przekłada się to na lepszą dostępność, bardziej przewidywalne zachowanie i czytelniejszy kod, co moim zdaniem jest kluczowe przy większych projektach.