HTML-<aside>-merkki

Määrittely ja käyttö

<aside> Tagi määrittelee sisältöä, joka ei kuulu siihen, missä se sijaitsee.

aside:n sisältö pitäisi olla välillisesti liittynyt ympäröivään sisältöön.

Vinkki:<aside> Sisältö asetetaan yleensä sivun sivupalkkina.

Huomioitavaa:<aside> Elementti ei näy erityisellä tavalla selaimessa. Voit kuitenkin käyttää CSS:ää asettaaksesi <aside> Elementin tyylejä (katso alla olevat esimerkit).

Katso myös:

HTML DOM -viittauskirja:Aside-objekti

Esimerkki

Esimerkki 1

Näytä sisältöä, joka ei kuulu siihen, missä se sijaitsee:

<p>This summer, my family and I visited the Shanghai Haichang Ocean Park. The weather was great, and the ocean park was very dreamy! We had a wonderful summer with my family!</p>
<aside>
<h4>Shanghai Haichang Ocean Park</h4>
<p>The Shanghai Haichang Ocean Park is a themed park located in Pudong New Area, with a total area of about 29.7 hectares, surrounded by ocean culture features, and is also a national AAAA-level tourist attraction,</p>
</aside>

Try it yourself

Esimerkki 2

Aseta <aside>-elementin tyylejä CSS:n avulla:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: oikealle;
  font-style: kursiivi;
  background-color: vaaleaharmaa;
}
</style>
</head>
<body>
<h1>aside-elementti</h1>
<p>This summer, my family and I visited the Shanghai Haichang Ocean Park. The weather was great, and the ocean park was very dreamy! We had a wonderful summer with my family!</p>
<aside>
<p>The Shanghai Haichang Ocean Park is a themed park located in Pudong New Area, with a total area of about 29.7 hectares, surrounded by ocean culture features, and is also a national AAAA-level tourist attraction,</p>
</aside>
<p>This summer, my family and I visited the Shanghai Haichang Ocean Park. The weather was great, and the ocean park was very dreamy! We had a wonderful summer with my family!</p>
<p>This summer, my family and I visited the Shanghai Haichang Ocean Park. The weather was great, and the ocean park was very dreamy! We had a wonderful summer with my family!</p>
</body>
</html>

Try it yourself

Global attributes

<aside> The tag also supports Global attributes in HTML.

event attributes

<aside> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <aside> Element:

aside {
  display: block;
}

Browser support

The numbers in the table indicate the first browser version to fully support this element.

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