Das <aside>-Element ist ein semantisches HTML-Element, das einen Inhalt markiert, der in Beziehung zum Hauptteil des Dokuments steht, aber nicht unbedingt ein direkter Teil davon ist. Es ist ein praktisches Werkzeug, um optionale oder unterstützende Informationen vom Hauptinhalt abzugrenzen.
Hervorhebung von Nebeninformationen
Das <aside>-Element eignet sich hervorragend, um Nebeninformationen zu präsentieren, wie z. B.:
Randnotizen: Zusätzliche Details oder Kommentare, die den Haupttext ergänzen
Zitate: Passende Zitate oder Referenzmaterialien
Empfehlungen: Produkt- oder Dienstleistungsempfehlungen, die mit dem Thema zusammenhängen
Schnellzugriff: Wichtige Links oder Tools, die leicht zugänglich sein sollen
Visuelle Trennung vom Hauptinhalt
Durch das Einbetten von Nebeninformationen in ein <aside>-Element kannst du diese visuell vom Hauptinhalt trennen. Dies hilft, den Lesefluss zu verbessern und die Benutzerfreundlichkeit zu erhöhen. Du kannst z. B. ein <aside>-Element für eine Sidebar verwenden, um Navigationslinks, Werbeanzeigen oder zusätzliche Ressourcen anzuzeigen.
Verbesserte Barrierefreiheit
Die Verwendung des <aside>-Elements verbessert auch die Barrierefreiheit. Assistive Technologien wie Bildschirmlesegeräte können den Inhalt von <aside>-Elementen als separaten Abschnitt identifizieren, wodurch es für Benutzer mit Behinderungen einfacher wird, Informationen zu navigieren und zu verstehen.
Verwendung des
Das
Ergänzende Inhalte
Verwende
Sidebar-Inhalt
Erstelle Seitenleisteninhalte, die neben dem Hauptinhalt angezeigt werden. Dies können Navigationsmenüs, Anmeldeformulare, Social-Media-Feeds oder Werbeanzeigen sein.
Auszüge und Zitate
Hebe wichtige Zitate, Auszüge oder Rezensionen hervor, indem du sie in ein
Schaltflächen und Links
Verwende
Hilfreiche Tipps
Überfrachte deine Füge nur relevante und nützliche Informationen hinzu.
Positioniere sie strategisch: Überlege, wo auf der Seite die Informationen im
Gestalte sie visuell ansprechend: Verwende Farben, Schriftarten und Bilder, um sie von deinem Hauptinhalt abzuheben.
Verwende beschreibende Titel: Gib dem
Sorge für Barrierefreiheit: Stelle sicher, dass die Inhalte in deinem
Gestaltungstipps für das
Nachdem du den Zweck und die Verwendung des
Positionierung
Überlege dir sorgfältig, wo du das
Größe und Abstand
Pass die Größe und den Abstand des
Hintergrund und Rahmen
Du kannst den Hintergrund und den Rahmen des
Schriftart und Stil
Die Schriftart und der Stil des Textes im
Bildmaterial und Videos
Bilder oder Videos können im
Best Practices für die Barrierefreiheit im
Als Webentwickler:in ist es wichtig, dass du bei der Verwendung des