HTML тег <aside>
Значение и применение
Тег <aside> (отступление) предназначен для обозначения содержимого, относящегося к окружающему этот
тег содержимому. Элемент <aside> представляет собой раздел страницы с контентом, который может
рассматриваться отдельно от основного содержания. В этих разделах часто размещаются боковые колонки, рекламный
контент, биографические данные, веб-приложения, информация о профиле пользователя, пометки на полях в печатном журнале
и так далее.
<article> <!-- начало статьи -->
<p>Сегодня мы с семьей пересматривали фильм "Один дома 2"...</p>
<aside> <!-- отступление (выносим информацию, например, на поля) -->
<p>В одной из сцен фильма снялся будущий президент <abbr title = "Соединенные штаты Америки">США</abbr> - <i>Дональд Трамп</i></p>
</aside>
</article> <!-- конец статьи -->
<header></header> <nav></nav> <section></section> <section></section> <aside></aside> <footer></footer>
Тег
<div>
имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы.
Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически
более осмысленных тегов.
Смысловые элементы
<header></header> <nav></nav> <section></section> <aside></aside> <section></section> <footer></footer> Только <div>
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут
использоваться вместо тега
<div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете
детально с ними познакомиться в статье учебника HTML "Теги разметки страницы".
Поддержка браузерами
Спецификация: multipage
Поддерживается во всех основных браузерах с 2015 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
aside | 5 | 12 | 4 | 11.1 | 5 | 18 | 4 | 11.1 | 4.2 | 1.0 | 4.4 | 4.2 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
Примеры, попробуйте сами
Дополнительная информация
Измените дополнительный текст внутри aside.
index.html
<main>
<h1>План путешествия</h1>
<p>Описание маршрута.</p>
<aside>
<h2>Полезно знать</h2>
<p>Возьмите карту местности.</p>
</aside>
</main>
Тони готовит пример…Значение CSS по умолчанию
aside {
display: block;
}
Поддержка глобальных атрибутов
Элемент поддерживает "глобальные атрибуты".
Атрибуты событий
Элемент поддерживает "атрибуты событий".