HTML Academy · Lektion

aside: ergänzende Inhalte

Verwenden Sie aside für Seitenleisten und thematisch verwandte Zusatzinhalte

aside: ergänzende Inhalte ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Das aside-Element

Das <aside>-Element kennzeichnet Inhalte, die nur am Rande mit dem umgebenden Inhalt zusammenhängen:

Es kann vom Hauptinhalt getrennt werden, ohne dass die Bedeutung des Hauptinhalts verloren geht
Denken Sie an Sidebars, Hinweisboxen, hervorgehobene Zitate und Werbung

aside in einem article

Innerhalb eines article kennzeichnet aside Informationen, die mit der Handlung zusammenhängen, aber für sie nicht wesentlich sind:

<article>
  <h2>How the Internet Works</h2>
  <p>The Internet is a global network of computers...</p>

  <aside>
    <h3>Did You Know?</h3>
    <p>The first email was sent in 1971 by Ray Tomlinson.</p>
  </aside>

  <p>Data travels in packets across routers...</p>
</article>

aside auf Seitenebene

Auf Seitenebene wird aside für Sidebars verwendet:

<div class="layout">
  <main>
    <article>...</article>
  </main>

  <aside>
    <h2>Related Articles</h2>
    <ul>...</ul>

    <h2>Newsletter</h2>
    <p>Subscribe for updates.</p>
  </aside>
</div>

ARIA-Rolle von aside

Ein <aside> auf Seitenebene wird auf role="complementary" abgebildet:

<aside aria-label="Related resources">
  <h2>Related resources</h2>
  ...
</aside>
<!-- Multiple asides should be uniquely labeled
     Screen reader users can jump directly to complementary regions -->

Hervorgehobene Zitate mit aside

Hervorgehobene Zitate (aus dem Kontext entnommene Zitate mit visueller Wirkung) können als aside gekennzeichnet werden:

<aside class="pullquote">
  <blockquote>
    <p>HTML is the foundation of the web — learn it well.</p>
  </blockquote>
</aside>

Werbung mit aside

Werbeeinheiten in Sidebars können als aside gekennzeichnet werden:

<aside aria-label="Advertisement">
  <p class="sr-only">Advertisement</p>
  <img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>

aside vs section

Der entscheidende Unterschied:

<aside> — hängt nur am Rande mit dem Hauptinhalt zusammen; ergänzend
<section> — ist thematischer Bestandteil des Hauptinhalts

aside für Glossarbegriffe

Verwenden Sie aside, um in einem article verwendete Begriffe zu definieren:

<article>
  <p>The DOM (Document Object Model) is updated when...</p>

  <aside id="dom-def">
    <dl>
      <dt>DOM</dt>
      <dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
    </dl>
  </aside>
</article>

Mehrere Sidebar-Abschnitte

Eine Sidebar-aside kann mehrere unabhängige sections enthalten:

<aside aria-label="Sidebar">
  <section>
    <h2>About the Author</h2>
    <p>Jane Smith is a senior web developer...</p>
  </section>
  <section>
    <h2>Popular Posts</h2>
    <ul>...</ul>
  </section>
</aside>

aside benötigt keine Überschrift

Im Gegensatz zu section benötigt aside nicht zwingend eine Überschrift:

<!-- Valid aside without heading: -->
<aside>
  <img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
  <h2 class="sr-only">Promotions</h2>
  <img src="banner.jpg" alt="20% off this week only">
</aside>

aside nicht für beiläufiges Styling

Aside ist semantisch — verwenden Sie es nicht einfach für das visuelle Layout einer Sidebar:

<!-- BAD: aside used for layout only -->
<aside class="right-column">  <!-- no semantic relationship to main content -->
  <div class="ad">...</div>
</aside>

<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>

Schnelltest

Auf welche ARIA-Orientierungsrolle wird ein aside auf Seitenebene abgebildet?

Zusammenfassung: aside

Die wichtigsten Merkmale von aside:

Inhalte, die nur am Rande mit dem umgebenden Inhalt zusammenhängen
Sidebar auf Seitenebene → Orientierungsbereich complementary
Innerhalb eines article → ergänzende Informationen (Begriffsdefinitionen, Hinweisboxen)
Beschriften Sie mehrere asides mit aria-label
Nicht für reine Layout-Container — verwenden Sie dafür div

Häufig gestellte Fragen

Ist die Lektion „aside: ergänzende Inhalte“ kostenlos?

Ja — der vollständige Text von „aside: ergänzende Inhalte“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „aside: ergänzende Inhalte“?

Verwenden Sie aside für Seitenleisten und thematisch verwandte Zusatzinhalte Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „aside: ergänzende Inhalte“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu HTML Academy