Element <aside> w HTML5 jest używany do oznaczania części strony, które są pośrednio związane z główną treścią strony. Może to być na przykład panel boczny, przypisy, reklamy, linki do podobnych artykułów lub biografie autorów. Użycie <aside> pomaga w semantycznym strukturyzowaniu strony i poprawia dostępność, informując czytniki ekranowe i inne technologie wspomagające o tym, jak interpretować różne sekcje strony.
Przykład użycia
Poniższy przykład przedstawia prostą stronę HTML z użyciem elementu <aside> do wyświetlenia informacji pobocznych, takich jak biografia autora i powiązane linki.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład użycia elementu <aside> w HTML5</title>
<style>
body {
font-family: Arial, sans-serif;
}
article {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
}
aside {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
background-color: #f8f8f8;
}
</style>
</head>
<body>
<article>
<h2>Główny tytuł artykułu</h2>
<p>To jest główna treść artykułu. Tutaj znajduje się większość
informacji, które chcesz przekazać swoim czytelnikom.</p>
</article>
<aside>
<h3>O autorze</h3>
<p>Biografia autora, krótki opis doświadczenia zawodowego
i zainteresowań.</p>
<h3>Powiązane linki</h3>
<ul>
<li><a href="#">Link do innego artykułu</a></li>
<li><a href="#">Link do strony autora</a></li>
</ul>
</aside>
</body>
</html>
W tym przykładzie, <aside> zawiera informacje dodatkowe, które nie są kluczowe dla zrozumienia głównej treści artykułu, ale mogą być interesujące dla czytelnika. Użycie semantycznych znaczników, takich jak <aside>, pomaga w utrzymaniu porządku i struktury strony, co jest korzystne zarówno dla użytkowników, jak i wyszukiwarek.
Podsumowanie
Element <aside> w HTML5 to potężne narzędzie do tworzenia semantycznie bogatych stron internetowych. Poprawia on dostępność strony poprzez wyraźne oznaczanie treści pobocznych, które nie są głównym punktem strony. Jest szczególnie przydatny w przypadkach, gdy chcesz dodać dodatkowe informacje, takie jak biografie, reklamy, czy linki do powiązanych zasobów, nie odciągając jednak uwagi od głównej treści. Pamiętaj, że odpowiednie użycie znaczników semantycznych, takich jak <aside>, jest kluczem do budowania dostępnych i dobrze zorganizowanych stron internetowych.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.