HTML <aside> Tag

Kursrekommendation:

<aside> Definition och användning

Taggen definierar innehåll som ligger utanför dess innehåll.

Innehållet i aside bör vara indirekt relaterat till omgivande innehåll.<aside> Tips:

Innehållet placeras vanligtvis som en sidopanel i dokumentet.<aside> Observera: <aside> Stilen för elementet (se exempel nedan).

Se också:

HTML DOM-referenshandbok:Aside-objekt

Exempel

Exempel 1

Visa innehåll som ligger utanför dess innehåll:

<p>Den här sommaren besökte jag Shanghai Haichang Ocean Park tillsammans med min familj. Vädret var bra, och ocean parken var mycket drömlik! Jag och min familj hade en underbar sommar!</p>
<aside>
<h4>Shanghai Haichang Ocean Park</h4>
<p>Shanghai Haichang Ocean Park är en temapark belägen i Pudong新区, som omger sig kring marinkulturella drag, med en total area på cirka 29.7 hektar och är också en nationell AAAA-nivå turistattraktion,</p>
</aside>

Prova själv

Exempel 2

Använd CSS för att ställa in stilen för <aside>-elementet:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: ljusgrå;
}
</style>
</head>
<body>
<h1>aside-element</h1>
<p>Den här sommaren besökte jag Shanghai Haichang Ocean Park tillsammans med min familj. Vädret var bra, och ocean parken var mycket drömlik! Jag och min familj hade en underbar sommar!</p>
<aside>
<p>Shanghai Haichang Ocean Park är en temapark belägen i Pudong新区, som omger sig kring marinkulturella drag, med en total area på cirka 29.7 hektar och är också en nationell AAAA-nivå turistattraktion,</p>
</aside>
<p>Den här sommaren besökte jag Shanghai Haichang Ocean Park tillsammans med min familj. Vädret var bra, och ocean parken var mycket drömlik! Jag och min familj hade en underbar sommar!</p>
<p>Den här sommaren besökte jag Shanghai Haichang Ocean Park tillsammans med min familj. Vädret var bra, och ocean parken var mycket drömlik! Jag och min familj hade en underbar sommar!</p>
</body>
</html>

Prova själv

Globala egenskaper

<aside> Etiketterna stöder också Globala egenskaper i HTML.

Evenementegenskaper

<aside> Etiketterna stöder också Evenementegenskaper i HTML.

Standard CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för att visa <aside> Element:

aside {
  display: block;
}

Webbläsarstöd

Numrerna i tabellen anger den första webbläsarens version som helt stöder detta element.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1