Tag <aside> HTML

Definicja i użycie

<aside> Tag definiuje zawartość poza zawartością, w której się znajduje.

Zawartość asydę powinna być pośrednio związana z otaczającą ją zawartością.

Wskazówka:<aside> Zawartość jest zazwyczaj umieszczana jako boczna kolumna w dokumencie.

Uwaga:<aside> Element w przeglądarce nie jest prezentowany w specjalny sposób. Ale możesz ustawić go za pomocą CSS: <aside> Styl elementu (zobacz poniższe przykłady).

Zobacz również:

Przeglądarka HTML DOM:Obiekt Aside

Przykład

Przykład 1

Pokazuj zawartość poza zawartością, w której się znajduje:

<p>W tym roku latem moja rodzina odwiedziła Shanghai Ocean Park. Pogoda była dobra, park oceaniczny był bardzo magiczny! Moja rodzina spędziła wspaniałe lato!</p>
<aside>
<h4>Shanghai Ocean Park</h4>
<p>Shanghai Ocean Park to tematowy park rozrywki zlokalizowany w nowej dzielnicy Pudong, obejmujący obszar około 29,7 hektara, a także jest to krajowy park turystyczny klasy AAAA.</p>
</aside>

Spróbuj sam

Przykład 2

Ustawienia stylu elementu <aside> za pomocą CSS:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>
<h1>element asydę</h1>
<p>W tym roku latem moja rodzina odwiedziła Shanghai Ocean Park. Pogoda była dobra, park oceaniczny był bardzo magiczny! Moja rodzina spędziła wspaniałe lato!</p>
<aside>
<p>Shanghai Ocean Park to tematowy park rozrywki zlokalizowany w nowej dzielnicy Pudong, obejmujący obszar około 29,7 hektara, a także jest to krajowy park turystyczny klasy AAAA.</p>
</aside>
<p>W tym roku latem moja rodzina odwiedziła Shanghai Ocean Park. Pogoda była dobra, park oceaniczny był bardzo magiczny! Moja rodzina spędziła wspaniałe lato!</p>
<p>W tym roku latem moja rodzina odwiedziła Shanghai Ocean Park. Pogoda była dobra, park oceaniczny był bardzo magiczny! Moja rodzina spędziła wspaniałe lato!</p>
</body>
</html>

Spróbuj sam

Globalne atrybuty

<aside> Tagi te wspierają również Globalne atrybuty HTML.

Atrybuty wydarzeń

<aside> Tagi te wspierają również Atrybuty wydarzeń w HTML.

Domyślne ustawienia CSS

Większość przeglądarek domyślnie wyświetla wartości <aside> Element:

aside {
  display: block;
}

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten element.

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