<aside>

Zuletzt aktualisiert am 3. Februar 2026

Das <aside>-Element markiert Inhalte, die thematisch mit dem umgebenden Inhalt zusammenhängen, aber auch unabhängig davon Sinn ergeben. Typische Einsatzgebiete sind Sidebars, Infoboxen, Zitate, Werbeblöcke oder Listen mit verwandten Artikeln.

Grundlagen

Das <aside>-Element ist ein semantisches Strukturelement, das ergänzende oder tangential verwandte Inhalte kennzeichnet. Der Inhalt innerhalb eines <aside> ist nicht essenziell für das Verständnis des Hauptinhalts, liefert aber zusätzlichen Kontext oder Informationen.

Typische Anwendungsfälle:

Sidebar-Pattern: In einem Artikel oder einer Seite kann ein <aside> als Seitenleiste verwendet werden, die zusätzliche Informationen, verwandte Links oder Navigationselemente enthält. Diese Inhalte stehen in Beziehung zum Hauptinhalt, sind aber nicht Teil der primären Inhaltshierarchie.

Pullquote-Pattern: Innerhalb eines Artikels kann ein <aside> ein hervorgehobenes Zitat, eine Randbemerkung oder eine Infobox enthalten. Diese Elemente unterbrechen den Lesefluss, bieten aber ergänzende Perspektiven oder Detailinformationen.

Werbebereich: Auch Werbebanner oder gesponserte Inhalte, die thematisch zum Hauptinhalt passen, können in einem <aside> untergebracht werden.

Screenreader und andere assistive Technologien erkennen <aside> als “complementary” Landmark und ermöglichen es Nutzern, gezielt zu ergänzenden Inhalten zu springen oder diese zu überspringen.

Syntax

<p>Hauptinhalt des Artikels...</p>

<aside>
  <h3>Verwandte Themen</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</aside>

Beispiele

Sidebar mit verwandten Artikeln

<article>
  <h2>Webentwicklung lernen</h2>
  <p>Dieser Artikel erklärt die Grundlagen der Webentwicklung.
     HTML bildet das Fundament...</p>
</article>

<aside>
  <h3>Das könnte dich auch interessieren</h3>
  <ul>
    <li><a href="#">CSS für Einsteiger</a></li>
    <li><a href="#">JavaScript Basics</a></li>
    <li><a href="#">Responsive Design</a></li>
  </ul>
</aside>

Infobox innerhalb eines Artikels

<article>
  <h2>Die Geschichte des Internets</h2>
  <p>Das Internet entstand in den 1960er Jahren als militärisches
     Forschungsprojekt...</p>

  <aside style="border-left: 3px solid #007acc;
                padding-left: 1rem;
                margin: 1rem 0;
                background: #f5f5f5;">
    <p><strong>Wusstest du?</strong> Die erste Nachricht im ARPANET
       wurde am 29. Oktober 1969 versendet.</p>
  </aside>

  <p>In den 1990er Jahren wurde das World Wide Web für die
     Öffentlichkeit zugänglich...</p>
</article>

Werbebereich in einem Blog

<article>
  <h2>Die besten Laptops 2026</h2>
  <p>In diesem Testbericht schauen wir uns die aktuellen
     Top-Modelle an...</p>
</article>

<aside style="border: 1px solid #ddd;
              padding: 1rem;
              margin-top: 1rem;
              background: #fafafa;">
  <p style="font-size: 0.85rem; color: #666; margin: 0 0 0.5rem;">
    Anzeige
  </p>
  <h3 style="font-size: 1rem; margin: 0 0 0.5rem;">
    Laptop-Zubehör im Sale
  </h3>
  <p style="font-size: 0.9rem; margin: 0;">
    Bis zu 40% Rabatt auf Taschen, Mäuse und mehr.
  </p>
  <a href="#" style="display: inline-block;
                     margin-top: 0.5rem;
                     padding: 0.5rem 1rem;
                     background: #007acc;
                     color: white;
                     text-decoration: none;
                     border-radius: 4px;">
    Jetzt sparen
  </a>
</aside>

Barrierefreiheit

Das <aside>-Element wird von Screenreadern automatisch als complementary Landmark erkannt. Das bedeutet, dass Nutzer assistiver Technologien gezielt zu ergänzenden Inhalten navigieren oder diese überspringen können.

Wenn mehrere <aside>-Elemente auf einer Seite verwendet werden, solltest du jedem ein aria-label geben, um sie voneinander zu unterscheiden:

<aside aria-label="Verwandte Artikel">
  <!-- Links zu anderen Artikeln -->
</aside>

<aside aria-label="Werbung">
  <!-- Werbeinhalte -->
</aside>

So können Screenreader-Nutzer besser einschätzen, welcher ergänzende Inhalt für sie relevant ist.

Häufige Fehler

aside für Hauptinhalt verwenden: Das <aside>-Element ist nur für ergänzende Inhalte gedacht. Wenn der Inhalt essenziell für das Verständnis der Seite ist, gehört er in ein <main>, <article> oder <section>-Element. Ein häufiger Fehler ist es, wichtige Navigationselemente oder zentrale Inhalte in ein <aside> zu packen – das verwirrt Screenreader-Nutzer und verschlechtert die semantische Struktur.

aside ohne Bezug zum umgebenden Inhalt: Ein <aside> sollte immer thematisch zum Hauptinhalt passen. Wenn du zum Beispiel auf einer Produktseite eine Sidebar mit völlig unverwandten Blog-Artikeln einbaust, ist das semantisch fragwürdig. Das Element heißt nicht umsonst “aside” – es sollte “zur Seite” stehen, aber nicht inhaltlich völlig losgelöst sein.

Verschachtelte aside-Elemente ohne Grund: Theoretisch kannst du <aside>-Elemente verschachteln, aber das ist in der Praxis selten sinnvoll. Wenn du mehrere ergänzende Inhalte hast, ist es meist besser, mehrere separate <aside>-Elemente auf der gleichen Ebene zu verwenden und diese mit aria-label zu beschreiben.

Browser-Kompatibilität

Das aside-Element wird von allen modernen Browsern vollständig unterstützt. Auch ältere Browser ab IE 9 haben keine Probleme damit.

Email-Kompatibilität

In HTML-E-Mails ist die Verwendung von aside nicht empfehlenswert. Die meisten E-Mail-Clients ignorieren semantische HTML5-Elemente oder behandeln sie wie normale div-Elemente. Verwende stattdessen table-basierte Layouts oder div-Elemente mit Inline-Styles.

Verwandte Elemente