HTML Element - aside
Das aside-Element dient dazu, ergänzende Inhalte klar vom Hauptinhalt abzugrenzen und zusätzliche Informationen semantisch einzuordnen, ohne den inhaltlichen Fokus der Seite zu unterbrechen.
Beispiel
<h1>Beispiel für den Einsatz von <code>aside</code></h1>
<h2>World Wide Web Consortium (W3C)</h2>
<p>
Das World Wide Web Consortium (W3C) entwickelt offene Standards für das Web und definiert unter anderem die offizielle Spezifikation von HTML. Diese Standards stellen sicher, dass Webinhalte plattformübergreifend einheitlich interpretiert werden.</p>
<aside>
<h3>World Wide Web Consortium (W3C)</h3>
Gründung: 1. Oktober 1994<br>
Gründer: Tim Berners-Lee<br>
Zweck: Standardisierungsgremium für das World Wide Web<br>
Webseite: <a href="http://www.w3c.org" title="Webseite des W3C" aria-label="Webseite des W3C">www.w3c.org</a>
</aside>
Definition und Verwendung
Das aside-Element definiert ergänzende Inhalte, die in einem indirekten Zusammenhang mit dem umgebenden Inhalt stehen.
Der Inhalt eines aside kann zum Beispiel aus Zusatzinfos, Hinweisen oder auch einer Navigation zu thematisch passenden bzw. weiterführenden Seiten bestehen.
Attribute
Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.
Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.
| Attribut | Beschreibung |
|---|---|
class |
Weist einem Element eine oder mehrere CSS-Klassen zu. |
Beispiel mit CSS
<DOCTYPE html>
<html>
<head>
<style>
body{
font-family: sans-serif;
}
h3 {
margin-top: 0;
margin-bottom: 8px;
}
.info-w3c {
padding: 5px 16px;
margin-left: 16px;
float: right;
border: solid 1px #cc0000;
border-radius: 8px;
background-color: rgba(204, 0, 0, 0.15);
}
</style>
</head>
<body>
<h1>Beispiel für den Einsatz von <code>aside</code></h1>
<h2>World Wide Web Consortium (W3C)</h2>
<aside class="info-w3c">
<h3>World Wide Web Consortium (W3C)</h3>
Gründung: 1. Oktober 1994<br>
Gründer: Tim Berners-Lee<br>
Zweck: Standardisierungsgremium für das World Wide Web<br>
Webseite: <a href="http://www.w3c.org" title="Webseite des W3C" aria-label="Webseite des W3C">www.w3c.org</a>
</aside>
<p>Das World Wide Web Consortium (W3C) entwickelt offene Standards für das Web und definiert unter anderem die offizielle Spezifikation von HTML. Diese Standards stellen sicher, dass Webinhalte plattformübergreifend einheitlich interpretiert werden.</p>
<p>Das W3C ist eine Mitgliedsorganisation. Gründer und Vorsitzender ist Tim Berners-Lee, der als Erfinder des World Wide Web gilt. Das W3C entwickelt technische Spezifikationen und Richtlinien in einem ausgereiften, transparenten Prozess, um maximalen Konsens über den Inhalt technischer Protokolle, hohe technische und redaktionelle Qualität und Zustimmung durch das W3C und seine Anhängerschaft zu erzielen.</p>
</body>
</html>
Standardbrowser CSS
Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.
aside {
display: block;
}
Browserunterstützung
Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.
| Element | Firefox | Internet Explorer / Edge | Safari | Chrome | Opera |
|---|---|---|---|---|---|
<aside> |
|||||
| seit Version: | 4.0 | 9.0 | 6.0 | 5.0 | 11.1 |