Тег HTML <aside>

  • Предыдущая страница <article>
  • Следующая страница <audio>

Определение и использование

<aside> Тег определяет содержимое, отличное от содержимого, в котором он находится.

Содержимое aside должно быть косвенно связано с окружающим содержимым.

Совет:<aside> Содержимое обычно размещается в документе в виде боковой панели.

Примечание:<aside> Элемент не отображается в браузере в каком-либо особом стиле. Однако, вы можете использовать CSS для настройки: <aside> Стиль элемента (см. примеры ниже).

Уточнение:

Руководство HTML DOM:Объект Aside

Пример

Пример 1

Показывать содержимое, отличное от содержимого, в котором он находится:

<p>Этот летний сезон я с моей семьей посетил Shanghai Ocean Park. Погода была отличной, парк был очень фантастическим! Я и моя семья провели чудесное лето!</p>
<aside>
<h4>Шанхайский океанариум Хайчан</h4>
<p>Shanghai Ocean Park - это тема парк, расположенный в Пудунском районе, общей площадью около 29,7 гектаров, вокруг темы культуры моря, также является национальным旅游景区 AAAA уровня,</p>
</aside>

Попробуйте сами

Пример 2

Использование CSS для настройки стиля элемента <aside>:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>
<h1>aside элемент</h1>
<p>Этот летний сезон я с моей семьей посетил Shanghai Ocean Park. Погода была отличной, парк был очень фантастическим! Я и моя семья провели чудесное лето!</p>
<aside>
<p>Shanghai Ocean Park - это тема парк, расположенный в Пудунском районе, общей площадью около 29,7 гектаров, вокруг темы культуры моря, также является национальным旅游景区 AAAA уровня,</p>
</aside>
<p>Этот летний сезон я с моей семьей посетил Shanghai Ocean Park. Погода была отличной, парк был очень фантастическим! Я и моя семья провели чудесное лето!</p>
<p>Этот летний сезон я с моей семьей посетил Shanghai Ocean Park. Погода была отличной, парк был очень фантастическим! Я и моя семья провели чудесное лето!</p>
</body>
</html>

Попробуйте сами

Глобальные свойства

<aside> Тег также поддерживает Глобальные свойства в HTML.

Свойства событий

<aside> Тег также поддерживает Свойства событий в HTML.

Установки CSS по умолчанию

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <aside> Элемент:

aside {
  display: block;
}

Поддержка браузерами

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот элемент.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1
  • Предыдущая страница <article>
  • Следующая страница <audio>