<aside>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML-элемент <aside> представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.

Интерактивный пример

<p>
  Salamanders are a group of amphibians with a lizard-like appearance, including
  short legs and a tail in both larval and adult forms.
</p>

<aside>
  <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>

<p>
  Several species of salamander inhabit the temperate rainforest of the Pacific
  Northwest, including the Ensatina, the Northwestern Salamander and the
  Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects,
  worms and other small creatures.
</p>

aside {
  width: 40%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  box-shadow: inset 5px 0 5px -5px #29627e;
  font-style: italic;
  color: #29627e;
}

aside > p {
  margin: 0.5rem;
}
Категории контента Основной поток, секционный контент, явный контент.
Допустимое содержимое Основной поток.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент <aside> не должен быть потомком элемента <address>.
Допустимые ARIA-роли feed, note, presentation, region, search
DOM-интерфейс HTMLElement

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание

  • Не используйте элемент <aside> для пометки текста в скобках, так как этот вид текста считается частью основного потокового контента.

Примеры

html
<article>
  <p>
    Мультфильм студии Уолта Диснея <em>Русалочка</em>
    был выпущен в 1989.
  </p>
  <aside>
    <p>Мультфильм заработал $87 миллионов во время первого выпуска.</p>
  </aside>
  <p>Подробнее об этом мультфильме...</p>
</article>

Спецификации

Specification
HTML
# the-aside-element

Совместимость с браузерами

Смотрите также