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

W tym zadaniu kluczowe jest rozpoznanie, że sekcja B na ilustracji nie jest zwykłym fragmentem treści, tylko blokiem służącym do poruszania się po stronie: linki „Główna”, „O nas”, „Kontakt”. W semantycznym HTML5 dla takiej właśnie grupy odsyłaczy przewidziano specjalny znacznik <nav>. Częsty błąd polega na tym, że projektanci wrzucają menu nawigacyjne do zwykłego <div> albo <section>, a semantykę zostawiają na później. Technicznie strona działa, ale traci się zalety wynikające z poprawnej struktury: czytniki ekranu nie mogą łatwo przeskoczyć do nawigacji, roboty wyszukiwarek gorzej interpretują układ, a cała strona staje się mniej dostępna. Innym typowym nieporozumieniem jest używanie <header> dla wszystkiego, co znajduje się „na górze” strony. Nagłówek faktycznie często zawiera menu, ale to menu i tak powinno być wydzielone znacznikiem <nav> wewnątrz <header>. Sam <header> opisuje obszar wprowadzający: logo, tytuł, czasem slogan. Z kolei <section> i <article> służą do logicznego dzielenia treści merytorycznej, a nie do nawigacji. Jeśli więc sekcja B zawiera tylko linki menu, zamykanie jej w <section> myli sens dokumentu – wygląda, jakby to była kolejna część artykułu, a nie narzędzie przechodzenia między podstronami. Podobnie znaczniki typu <aside> czy <footer> też nie pasują: <aside> jest na treści poboczne, a <footer> na stopkę. W nowoczesnych projektach, zgodnych z HTML Living Standard i dobrymi praktykami dostępności, wszystkie główne obszary nawigacji opisuje się konsekwentnie za pomocą <nav> i to właśnie odróżnia kod „zlepiony byle działał” od kodu, który jest przemyślany i profesjonalny.