HTML <aside>-Tag
Das HTML <aside>-Tag definiert tangentialen Inhalt wie eine Seitenleiste und erzeugt eine ARIA-complementary-Landmark für die Barrierefreiheit.
Das <aside>-Tag ist eines der HTML5-Elemente, mit dem ein Abschnitt definiert wird, der Inhalt enthält, der thematisch mit dem Hauptinhalt verwandt, aber nicht zentral dafür ist. Es wird häufig verwendet, um einen Artikel mit Zusatzinformationen zu ergänzen oder besonders interessante Teile hervorzuheben. Der Inhalt eines <aside> ist ein eigenständiger, nicht zwingend notwendiger Teil der Webseite – wird er entfernt, bleibt der Hauptinhalt davon unberührt.
Endnoten, Kommentare, Begriffslisten, Referenzinformationen, Linksammlungen, Pull-Quotes usw. sind Beispiele für Inhalte, die innerhalb des <aside>-Elements stehen können.
Verwechseln Sie das <aside>-Element nicht mit einer Seitenleiste. Die Seitenleiste ist lediglich ein visuelles Element, und das <aside>-Tag sieht nicht zwingend wie eine Seitenleiste aus.
Verwenden Sie das <aside>-Element nicht für Parenthesen oder eingeschobene Texte, da es für tangentialen Inhalt und nicht für inline oder ergänzenden Text im Hauptfluss gedacht ist.
Dieses Element eignet sich für typografische Effekte bei Inhalten, die vom Hauptinhalt der Seite abgetrennt sind. Beispielsweise kann es für Bibliographien, Pull-Quotes, ergänzende Informationskommentare und Ähnliches verwendet werden.
Warum <aside> verwenden? Barrierefreiheit und SEO
Der eigentliche Grund, <aside> einem einfachen Container vorzuziehen, ist die Semantik. Ein <aside> auf Seitenebene (eines, das außerhalb jedes <article>- oder <section>-Elements platziert wird) entspricht der ARIA-complementary-Landmark-Rolle. Das hat konkrete Auswirkungen:
- Screenreader stellen es als Landmark bereit. Benutzer von assistiver Technologie können „complementary"-Bereiche auflisten und direkt dorthin springen, genauso wie bei
<nav>und<main>. Ein generisches<div>bietet keine solche Landmark. - Es verdeutlicht die Dokumentstruktur. Suchmaschinen und Barrierefreiheits-Tools erstellen eine strukturelle Übersicht der Seite;
<aside>teilt ihnen mit, dass dieser Block unterstützenden und nicht primären Inhalt enthält. - Es signalisiert die Absicht gegenüber anderen Entwicklern. Das Markup selbst dokumentiert, dass der Inhalt tangential und entbehrlich ist.
Ein <aside> trägt immer die implizite ARIA-Rolle complementary. Ist es jedoch innerhalb eines <article>-Elements (oder <section>-Elements) verschachtelt, ist es auf diesen Inhalt beschränkt, und Screenreader stellen es in der Regel nicht als Landmark auf Seitenebene dar – es wird als zum Artikel gehörig und nicht zur gesamten Seite gelesen.
Wenn eine Seite mehr als ein <aside> enthält, geben Sie jedem einen eindeutigen zugänglichen Namen mit aria-label oder aria-labelledby, damit Screenreader-Nutzer die Landmarks unterscheiden können:
<aside aria-label="Author bio">…</aside>
<aside aria-labelledby="related-heading">
<h2 id="related-heading">Related articles</h2>
…
</aside>Syntax
Das <aside>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<aside>) und dem schließenden (</aside>) Tag geschrieben.
Beispiel des HTML-<aside>-Tags:
HTML-<aside>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<p>I like watching Game of Thrones.</p>
</main>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>Ergebnis
<aside> innerhalb eines <article> verschachtelt
Hier befindet sich das <aside> innerhalb des <article>. Der Hauptinhalt kommt zuerst, und das <aside> folgt als „Wussten Sie schon?"-Hinweis, der eindeutig tangential zu diesem spezifischen Artikel ist. Da es verschachtelt ist, behandeln Browser und Screenreader es als zum Artikel gehörig und nicht als Landmark auf Seitenebene.
Beispiel des HTML-<aside>-Tags mit dem <article>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the aside tag</h1>
<article>
<h2>Game of Thrones</h2>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels.</p>
<aside>
<h3>Did you know?</h3>
<p>The series ran for eight seasons and won numerous Emmy Awards, becoming one of the most-watched shows in television history.</p>
</aside>
</article>
</body>
</html><aside> auf Seitenebene vs. <aside> im Artikel
Die Platzierung von <aside> verändert seine Bedeutung. Ein <aside>, das außerhalb jedes <article>- oder <section>-Elements platziert wird, ist ein <aside> auf Seitenebene – in der Regel eine Seitenleiste mit Links, Werbung oder verwandten Beiträgen, die die gesamte Seite unterstützt. Ein <aside> innerhalb eines <article> unterstützt nur diesen Artikel.
<body>
<main>
<article>
<h2>How to brew pour-over coffee</h2>
<p>Heat the water to about 94°C, then pour slowly in circles…</p>
<!-- In-article aside: tangential to THIS article -->
<aside>
<h3>Tip</h3>
<p>A gooseneck kettle makes the pour much easier to control.</p>
</aside>
</article>
</main>
<!-- Page-level aside: a sidebar supporting the whole page -->
<aside aria-label="Related guides">
<h2>More guides</h2>
<ul>
<li><a href="/french-press">French press</a></li>
<li><a href="/cold-brew">Cold brew</a></li>
</ul>
</aside>
</body>Auf einer Seite können mehrere <aside>-Elemente verwendet werden, die auf verschiedenen Ebenen verschachtelt sein können. Geben Sie jedem <aside> auf Seitenebene ein aria-label oder aria-labelledby, damit seine Landmark einen eindeutigen Namen trägt.
Der Unterschied zwischen den Tags <aside> und <div>
Das <div>-Element ist ein generischer Container ohne semantische Bedeutung – für assistive Technologie ist es strukturell unsichtbar und gibt nichts außer dem enthaltenen Text preis. Ein <aside> auf Seitenebene hingegen legt eine complementary-Landmark offen, zu der Screenreader-Nutzer direkt navigieren können. Dieser Unterschied wirkt sich auf Barrierefreiheit und SEO aus.
Vergleichen Sie die beiden Ansätze zur Auszeichnung einer Seitenleiste:
<!-- Before: no semantics, just a styled box -->
<div class="sidebar">
<h2>Related links</h2>
<ul>…</ul>
</div>
<!-- After: a navigable complementary landmark -->
<aside aria-label="Related links">
<h2>Related links</h2>
<ul>…</ul>
</aside>Wann würde man trotzdem <div> verwenden? Greifen Sie auf <div> zurück, wenn der Wrapper ausschließlich zu Styling- oder Layoutzwecken existiert (eine Grid-Zelle, ein Flex-Wrapper, eine Card-Hülle) und keine eigenständige, tangentiale Bedeutung trägt. Wenn der Block unterstützenden, aber entbehrlichen Inhalt darstellt, ist <aside> vorzuziehen; handelt es sich lediglich um einen CSS-Hook, ist <div> die richtige Wahl.
Attribute
Das <aside>-Tag unterstützt die globalen Attribute und die Ereignisattribute.
Beispiel mit einem globalen Attribut:
<aside class="sidebar-note" id="extra-info">
<p>Additional context goes here.</p>
</aside>So gestalten Sie ein HTML-<aside>-Tag
Das <aside>-Element hat kein standardmäßiges visuelles Styling, daher fügen Sie in der Regel Ihr eigenes hinzu. Die folgenden Farben dienen nur zur Veranschaulichung – verwenden Sie im Produktionscode die Design-Tokens oder benannte Werte Ihres Projekts anstelle von direkten Hex-Werten:
aside {
background-color: whitesmoke;
border-left: 4px solid lightgray;
padding: 10px;
}Browserunterstützung und Geschichte
Das <aside>-Element wurde in HTML5 eingeführt und wird von allen modernen Browsern unterstützt. Vor HTML5 zeichneten Entwickler denselben Inhalt mit einem generischen Container wie <div id="sidebar"> aus, der Browsern, Suchmaschinen oder assistiver Technologie keine Bedeutung vermittelte. Das semantische <aside>-Element ersetzt dieses Muster.
Verwandte Elemente
<article>— eigenständiger Inhalt, den ein<aside>häufig unterstützt.<main>— der dominante Inhalt des Dokuments.<section>— eine thematische Gruppierung von Inhalten.<nav>— ein weiteres Landmark-Element für Navigationslinks.