<aside>
Treść poboczna, luźno związana z otoczeniem: ramka, pasek boczny, przypis.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu bez elementu
<main>
Przykład
#<article>
<h2>Czym jest DOM</h2>
<p>DOM to drzewo obiektów, które przeglądarka buduje z kodu HTML.</p>
<aside>
<strong>Ciekawostka:</strong> skrót DOM rozwija się jako Document Object Model.
</aside>
<p>Każdy znacznik staje się węzłem tego drzewa.</p>
</article>Definicja i zastosowanie
#Element <aside> zawiera treści, które uzupełniają główny tekst, ale można je pominąć bez utraty sensu: ramkę z ciekawostką, słowniczek, listę powiązanych artykułów czy boczny panel z reklamą.
Wewnątrz <article> element odnosi się do tego artykułu, na przykład jako wyróżniony cytat albo definicja. Umieszczony poza artykułem odnosi się do całej strony i często pełni rolę paska bocznego.
Technologie asystujące rozpoznają <aside> jako punkt orientacyjny „complementary”. Domyślnie nie ma żadnego wyglądu, położenie z boku nadajesz w CSS.
Składnia
#<aside>
…
</aside>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
aside {
display: block;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie używaj
<aside>do nawiasów w zdaniu. Na krótką uwagę w tekście wystarczy zwykły nawias albo<small>. - Jeśli na stronie jest kilka paneli bocznych, nadaj im nazwy przez
aria-label.
Powiązane hasła
#- <article>Samodzielna, zamknięta treść, którą można przeczytać i udostępnić osobno.
- <section>Tematyczna część dokumentu, zwykle z własnym nagłówkiem.
- <nav>Blok głównych linków nawigacyjnych: menu, spis treści, okruszki.
- <figure>Samodzielna ilustracja z opcjonalnym podpisem: obraz, wykres, fragment kodu, cytat.
Widzisz błąd albo brakuje przykładu? Napisz do nas.