<aside>: Das Aside-Element
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das <aside> HTML-Element repräsentiert einen Teil eines Dokuments, dessen Inhalt nur indirekt mit dem Hauptinhalt des Dokuments zusammenhängt. Asides werden häufig als Sidebars oder Call-out-Boxen dargestellt.
Probieren Sie es aus
<p>
Salamanders are a group of amphibians with a lizard-like appearance, including
short legs and a tail in both larval and adult forms.
</p>
<aside>
<p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>
<p>
Several species of salamander inhabit the temperate rainforest of the Pacific
Northwest, including the Ensatina, the Northwestern Salamander and the
Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects,
worms and other small creatures.
</p>
aside {
width: 40%;
padding-left: 0.5rem;
margin-left: 0.5rem;
float: right;
box-shadow: inset 5px 0 5px -5px #29627e;
font-style: italic;
color: #29627e;
}
aside > p {
margin: 0.5rem;
}
Attribute
Dieses Element beinhaltet nur die globalen Attribute.
Anwendungshinweise
- Verwenden Sie das
<aside>-Element nicht, um in Klammern gesetzten Text zu kennzeichnen, da dieser Text als Teil des Hauptflusses betrachtet wird.
Beispiele
Verwendung von <aside>
Dieses Beispiel verwendet <aside>, um einen Paragraphen in einem Artikel zu kennzeichnen. Der Paragraph steht nur indirekt mit dem Hauptinhalt des Artikels in Zusammenhang:
html
<article>
<p>
The Disney movie <cite>The Little Mermaid</cite> was first released to
theatres in 1989.
</p>
<aside>
<p>The movie earned $87 million during its initial release.</p>
</aside>
<p>More info about the movie…</p>
</article>
Ergebnis
Technische Zusammenfassung
| Inhaltskategorien | Flow content, sectioning content, palpable content. |
|---|---|
| Erlaubter Inhalt | Flow content. |
| Weghlassen von Tags | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
| Erlaubte Eltern |
Jedes Element, das
flow content akzeptiert. Beachten Sie, dass ein <aside>-Element
kein Nachfolger eines <address>-Elements sein darf.
|
| Implizierte ARIA-Rolle |
complementary
|
| Erlaubte ARIA-Rollen |
feed, none,
note, presentation,
region, search
|
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Specification |
|---|
| HTML # the-aside-element |
Browser-Kompatibilität
Loading…