HTML <aside>-Element
Das <aside>-Element ist eines der HTML5-Elemente, die verwendet werden, um einen Abschnitt zu definieren, der Inhalte enthält, die nur lose mit dem Hauptinhalt verknüpft sind. Es wird im Allgemeinen verwendet, um einen Artikel mit zusätzlichen Informationen zu ergänzen oder Teile hervorzuheben, die für den Benutzer interessant sein könnten. Der Inhalt in <aside> ist ein eigenständiger, nicht wesentlicher Teil der Webseite. Wenn Sie ihn löschen, wird der Hauptinhalt nicht beeinträchtigt.
Endnoten, Kommentare, Begriffsverzeichnisse, Referenzinformationen, eine Sammlung von Links, Zitatblöcke usw. sind Beispiele für Informationen, die innerhalb des <aside>-Elements stehen können.
Erfolg
Verwechseln Sie das
<aside>-Element nicht mit einer Seitenleiste. Die Seitenleiste ist lediglich ein visuelles Element, und das<aside>-Tag sieht nicht systematisch wie eine Seitenleiste aus.
Achtung
Verwenden Sie das
<aside>-Element nicht für Klammertext, da es für lose verknüpfte Inhalte und nicht für inline oder ergänzenden Text innerhalb des Hauptflusses gedacht ist.
Sie können dieses Element für typografische Effekte bei Inhalten verwenden, die vom Hauptinhalt der Seite getrennt sind. Beispielsweise kann es für Bibliografien, Zitatblöcke, Kommentare mit zusätzlichen Informationen usw. genutzt werden.
Syntax
Das <aside>-Tag wird immer in Paaren verwendet. Der Inhalt wird zwischen dem öffnenden (<aside>) und dem schließenden (</aside>) Tag geschrieben.
Beispiel für das HTML <aside>-Tag:
HTML <aside>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>I like watching Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>Ergebnis
Beispiel für das HTML <aside>-Tag in Kombination mit dem HTML <article>-Tag:
Beispiel für das HTML <aside>-Tag mit dem <article>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the aside tag</h1>
<aside>
<h2>Here is some heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</aside>
<article>
<h3>Game of Thrones</h3>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</article>
</body>
</html>Der Unterschied zwischen den <aside>- und <div>-Tags
Das <div>-Element ist ein generischer Container ohne semantische Bedeutung, während das <aside>-Element semantische Bedeutung hinzufügt, indem es anzeigt, dass sein Inhalt nur lose mit dem Hauptinhalt verknüpft ist. Diese Unterscheidung wirkt sich auf Barrierefreiheit und SEO aus.
Attribute
Das <aside>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.
Beispiel mit einem globalen Attribut:
<aside class="sidebar-note" id="extra-info">
<p>Additional context goes here.</p>
</aside>So stylen Sie ein HTML <aside>-Tag
aside {
background-color: #f9f9f9;
border-left: 4px solid #ccc;
padding: 10px;
}Praxis
Was ist die korrekte Verwendung und die Merkmale des HTML <aside>-Tags laut dem Artikel auf W3Docs?