HTML aside – »Am Rande«

HTML aside

aside gehört zu den HTML-Tags zur Gliederung der Seite (sectioning) und kennzeichnet Bereiche der Seite, die nur am Rand mit dem Kerninhalt zu tun haben – ähnlicht wie die Seitenspalte (Marginale) in einem Fachbuch.

Sectioning Tags – Gliederung der Webseite

Die Klassiker unter den HTML-Tags für die Strukturierung der Webseite sagen nichts über den Inhalt: <div> und <span> sind Tags ohne semantische Bedeutung. aside, header, nav, article und section hingegen sind semantische Auszeichnungen – sie geben im Quelltext Auskunft über die Struktur der Seite und den Inhalt.

Semantische Tags

main, article, section, header, footer, nav und aside strukturieren den Inhalt. Sie bieten Nutzern mit Screenreadern die Merkmale, die eine schnelle Navigation zu den wesentlichen Inhalten erlauben – ähnlich wie das klassische Sprungziel über einen nach außen nicht sichtbaren Link und die ARIA-Landmarks role="main" oder role="complementory".

Daneben gestalten sie das Markup effizienter und pflegeleichter als zahllose div-Elemente mit einer Vielzahl von CSS-Klassen und geben auch den Suchmaschinen einen Anhalt, wo der eigentliche Inhalt der Webseite beginnt.

aside für nebensächlichen Inhalt

aside ist die Struktur für Inhalte, die nicht zu den Hauptinhalten einer Seite zählen – »am Rande« ist eine gute Übersetzung für aside. aside steht aber nicht für die Sidebar der Webseite und Inhalte der Sidebar sind nicht unbedingt »aside«.

aside steht für Bereiche einer Seite, die nicht unbedingt wichtig für das Verständnis der Seite sind, sondern eher als interessante zusätzliche Informationen zu verstehen sind, die zum Verständnis beitragen, aber nicht erforderlich für das Verständnis sind. Beispiele für aside sind weiterführende Links, ein kleines Glossar.

aside ähnelt HTML figure, aber figure enthält Informationen, die wichtig für das Verständnis sind, aber die nicht an einer bestimmten Position innerhalb des Inhalts liegen.