HTML <aside> -Tag


Beispiel

Zeigen Sie einige Inhalte neben den Inhalten an, in denen sie platziert sind:

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

Weitere „Probieren Sie es selbst“-Beispiele weiter unten.


Definition und Verwendung

Das <aside>Tag definiert neben dem Inhalt, in dem es platziert ist, einige Inhalte.

Der Seiteninhalt sollte indirekt mit dem umgebenden Inhalt in Beziehung stehen.

Tipp: Der <aside>Inhalt wird oft als Seitenleiste in einem Dokument platziert.

Hinweis: Das <aside>Element wird in einem Browser nicht als etwas Besonderes gerendert. Sie können das <aside> Element jedoch mit CSS formatieren (siehe Beispiel unten).


Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element vollständig unterstützt.

Element
<aside> 6.0 9.0 4.0 5.0 11.1

Globale Attribute

Das <aside>Tag unterstützt auch die globalen Attribute in HTML .


Ereignisattribute

Das <aside>Tag unterstützt auch die Ereignisattribute in HTML .



Mehr Beispiele

Beispiel

Verwenden Sie CSS, um das Element <aside> zu formatieren:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<h1>The aside element</h1>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>

Verwandte Seiten

HTML-DOM-Referenz: Aside Object


Standard-CSS-Einstellungen

Die meisten Browser zeigen das <aside>Element mit den folgenden Standardwerten an:

aside {
  display: block;
}