HTML :: Тег <aside>
В HTML тег <aside> (от англ. aside – в стороне) предназначен для размещения сопутствующей, дополнительной информации, которую можно удалить без ущерба для понимания основного содержимого всей страницы или раздела, но в тоже время косвенно связанной с этим содержимым. Чаще всего представляется в виде боковой панели, которая может содержать блок категорий, рубрик или ссылок по данной теме, блок ссылок на архив, рекламу, тематически связанную с содержимым страницы или раздела, или даже полноценную статью. Главное, удаление содержимого боковой панели не должно наносить вред пониманию основного содержимого, но вместе с тем, должно быть связано с основным содержимым.
Не рекомендуется, хотя и допускается, использовать элемент <aside> в качестве боковой панели навигации по сайту, поскольку для этих целей существует специальный элемент <nav>. Кроме того, <aside> не должен быть потомком элемента <address>.
Синтаксис
<aside>
...
</aside>
Закрывающий тег: обязателен.
Атрибуты
Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/sections.html#the-aside-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/aside
Примеры
<body> <!-- Шапка сайта --> <header class="site_header"> <!-- Содержимое шапки --> </header> <!-- Боковая панель --> <aside class="site_aside"> <a href="">Бюджет и гонорары актеров</a> <a href="">Актерский состав</a> <a href="">Кассовые сборы в мире</a> </aside> <!-- Уникальный контент страницы --> <main> <!-- Страница с информацией о содержании фильма --> </main> <!-- «Подвал» сайта --> <footer class="site_footer"> <!-- Содержимое Подвала --> </footer> </body>
Пример №1
<body> <!-- Шапка сайта --> <header class="site_header"> <!-- Содержимое шапки --> </header> <!-- Боковая панель --> <aside class="site_aside"> <div class="adv_block" id="adv1"> Например, 1-й блок для сопутствующей рекламы. </div> <div class="adv_block" id="adv2"> Например, 2-й блок для сопутствующей рекламы. </div> </aside> <!-- Уникальный контент страницы --> <main> <!-- Содержимое раздела --> </main> <!-- «Подвал» сайта --> <footer class="site_footer"> <!-- Содержимое Подвала --> </footer> </body>
Пример №2