HTML-тег <aside>
Тег <aside> является одним из элементов HTML5, используемых для определения раздела, содержащего контент, который косвенно связан с основным содержимым. Обычно он используется для дополнения статьи дополнительной информацией или выделения частей, которые могут быть интересны пользователю. Контент внутри <aside> представляет собой самостоятельную, не обязательную часть веб-страницы, и его удаление не повлияет на основное содержимое.
Примерами информации, которая может находиться внутри элемента <aside>, являются концевые сноски, комментарии, списки терминов, справочные данные, подборки ссылок, выносной текст (pull-quotes) и т. д.
TIP
Не путайте элемент <aside> со боковой панелью (sidebar). Боковая панель — это просто визуальный элемент, а тег <aside> не обязательно выглядит как боковая панель.
DANGER
Не используйте элемент <aside> для текста в скобках, так как он предназначен для косвенного контента, а не для встроенного или дополнительного текста в основном потоке.
Этот элемент можно использовать для типографских эффектов в контенте, отделенном от основного содержимого страницы. Например, его можно применять для библиографии, выносного текста, комментариев с дополнительной информацией и т. д.
Синтаксис
Тег <aside> используется парами. Контент размещается между открывающим (<aside>) и закрывающим (<​/aside>) тегами.
Пример использования HTML-тега <aside>:
HTML-тег <aside>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>I like watching Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>Результат
Пример использования HTML-тега <aside> вместе с HTML-тегом <article>:
Пример использования HTML-тега <aside> вместе с тегом <article>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the aside tag</h1>
<aside>
<h2>Here is some heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</aside>
<article>
<h3>Game of Thrones</h3>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</article>
</body>
</html>Различия между тегами <aside> и <div>
Элемент <div> является универсальным контейнером без семантического значения, тогда как элемент <aside> придает семантику, указывая, что его контент косвенно связан с основным содержимым. Это различие влияет на доступность (accessibility) и SEO.
Атрибуты
Тег <aside> поддерживает глобальные атрибуты и атрибуты событий.
Пример с глобальным атрибутом:
<aside class="sidebar-note" id="extra-info">
<p>Additional context goes here.</p>
</aside>Как стилизовать HTML-тег <aside>
aside {
background-color: #f9f9f9;
border-left: 4px solid #ccc;
padding: 10px;
}Практика
Каково правильное использование и характеристики HTML-тега <aside> согласно статье на W3Docs?