Elementy strukturalne
Elementy strukturalne w HTML5 pomagają w tworzeniu semantycznych stron internetowych i pozwalają na tworzenie rozbudowanych struktur witryn. Ułatwiają one organizację zawartości, poprawiają dostępność i czytelność kodu oraz wspomagają pozycjonowanie w wyszukiwarkach. W obecnym momencie elementy strukturalne są wręcz niezbędne podczas projektowania nowoczesnych stron internetowych.
Elementy strukturalne
header
Element header służy do oznaczania nagłówka strony lub sekcji. Może zawierać tytuł, logo, informacje o autorze, menu itp. Nagłówek jest zwykle umieszczany na początku strony lub sekcji i odgrywa kluczową rolę w organizacji zawartości oraz w nawigacji.
<header>
<h1>Tytuł strony</h1>
<nav>
<!-- menu nawigacyjne -->
</nav>
</header>nav
Element nav jest stosowany do oznaczenia nawigacji na stronie. Zwykle zawiera listę linków do innych stron lub sekcji. Użycie elementu nav pozwala przeglądarkom i technologiom wspierającym na lepsze zrozumienie, które części strony pełnią funkcję nawigacyjną.
<nav>
<ul>
<li><a href="/">Strona główna</a></li>
<li><a href="/o-nas">O nas</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>section
Element section używany jest do definiowania sekcji o powiązanej treści. Sekcja jest logicznym blokiem zawartości, który grupuje powiązane informacje na stronie. Zaleca się, aby każda sekcja miała swój własny nagłówek opisujący jej zawartość.
<section>
<h2>Tytuł sekcji</h2>
<p>Treść sekcji...</p>
</section>article
Element article stosowany jest do oznaczania samodzielnego fragmentu zawartości, który można łatwo wyodrębnić lub zrozumieć niezależnie od reszty strony. Przykładami użycia article mogą być artykuły, posty na blogach, komentarze lub inne jednostki treści, które mają własną wartość.
<article>
<h2>Tytuł artykułu</h2>
<p>Treść artykułu...</p>
</article>aside
Element aside służy do oznaczenia treści, która jest dodatkowa w stosunku do głównej zawartości. Przykładami użycia aside mogą być boczne panele z reklamami, przyciski udostępniania w mediach społecznościowych, powiązane artykuły czy inne informacje, które nie są głównym celem strony, ale mają wartość dodaną dla użytkownika.
<aside>
<h2>Reklama</h2>
<p>Tutaj znajduje się treść reklamy...</p>
</aside>footer
Element footer używany jest do oznaczania stopki strony lub sekcji. Zawiera informacje, takie jak dane kontaktowe, linki do polityki prywatności, praw autorskich, linki do profili w mediach społecznościowych itp. Stopka jest zwykle umieszczana na końcu strony lub sekcji i zawiera informacje pomocnicze dla użytkownika.
<footer>
<p>© 2023 Przykładowa Firma. Wszelkie prawa zastrzeżone.</p>
<p><a href="/polityka-prywatnosci">Polityka prywatności</a></p>
</footer>Warto zapamiętać
Elementy strukturalne HTML5, takie jak header, nav, section, article, aside i footer, odgrywają kluczową rolę w tworzeniu semantycznie bogatych, dobrze zorganizowanych i dostępnych stron internetowych. Wprowadzenie tych elementów ułatwia twórcom stron internetowych stosowanie dobrych praktyk, a przeglądarkom, wyszukiwarkom i technologiom wspierającym zrozumienie i interpretację zawartości strony.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
