<aside>

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.

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>

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.

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

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

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.

• Apple Mail

  Teilweise

  Wird als generisches Block-Element gerendert, semantische Bedeutung geht verloren.

• Gmail

  Keine

  Semantische HTML5-Elemente werden entfernt oder ignoriert.

• Outlook

  Keine

  Outlook entfernt semantische HTML5-Elemente.

• Thunderbird

  Teilweise

  Wird angezeigt, aber ohne semantische Bedeutung.

• Yahoo Mail

  Keine

  Semantische Elemente werden nicht unterstützt.