aside – treść uzupełniająca
<aside>…</aside>
Treść uzupełniająca – wiąże się z otoczeniem, ale strona miałaby sens także bez niej: pasek boczny z powiązanymi odnośnikami, ramka z wyjaśnieniem pojęcia, reklama, autor artykułu. To, że treść stoi „z boku”, jest kwestią znaczenia, a nie położenia – aside może stać wszędzie.
- Domyślne wyświetlanie:
display: block - Znacznik zamykający: wymagany
- Zawartość: treść przepływu
- Gdzie może wystąpić: wszędzie, gdzie dozwolona jest treść przepływu (nie w
address) - Interfejs DOM:
HTMLElement
Atrybuty
Tylko atrybuty globalne.
Przykłady
Pasek boczny strony i ramka z wyjaśnieniem wewnątrz artykułu:
<main>
<article>
<h1>Chleb na zakwasie w domu</h1>
<p>Zakwas przygotuj dzień wcześniej…</p>
<aside>
<h2>Czym jest zakwas</h2>
<p>Mieszanina mąki i wody, w której namnażają się drożdże i bakterie kwasu mlekowego.</p>
</aside>
</article>
</main>
<aside aria-label="Podobne przepisy">
<h2>Może ci się też spodobać</h2>
<ul>
<li><a href="/recipes/rolls/">Domowe bułki</a></li>
</ul>
</aside>
Dostępność
aside ma rolę complementary, a czytniki ekranu proponują go jako punkt orientacyjny strony. Wewnątrz article albo section traktują go jednak jako punkt orientacyjny tylko wtedy, gdy ma dostępną nazwę (aria-label).
Na co uważać
- Treść, bez której tekst nie miałby sensu, nie należy do
aside– na przykład ważne ostrzeżenie w instrukcji. - Uwagi w nawiasach albo dygresje w tekście to nie
aside, tylko zwykły tekst. - Wygląd (kolumna po prawej) to sprawa CSS. Na smartfonach pasek boczny zwykle przesuwa się pod treść.
Obsługa w przeglądarkach
Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 5, Firefox 4, Safari 5. Stan: październik 2026 (MDN browser-compat-data).
Zobacz też:
article – samodzielna treść
section – sekcja
main – główna treść
nav – nawigacja
figure – ilustracja z podpisem