Элемент <aside>

Элемент <aside> представляет собой раздел веб-страницы, который имеет косвенное отношение к содержимому веб-страницы и может быть рассмотрен отдельно от него. <aside> применяется для боковых панелей, рекламных блоков, ссылок на архив, меток и другой информации, которая отделена от основного содержимого.

<aside> часто используется для боковой панели, которая располагаются слева или справа от основного материала (рис. 1).

Боковая панель для навигации по сайту

Рис. 1. Боковая панель для навигации по сайту

В подобных случаях обычно применяется комбинация элементов <main> и <aside>, где <main> определяет основную уникальную часть веб-страницы, а <aside> — вспомогательную. В коде HTML это выглядит следующим образом.

<main>Основная часть</main>
<aside>Вспомогательная часть</aside>

Хотя <aside> определяет раздел и в нём допустимы любые элементы, в <aside> запрещено вставлять <main>.

Если <aside> располагается внутри <article>, то содержимое <aside> должно иметь отношение к тексту статьи. Внутрь <aside> при этом можно вставить глоссарий, сноски, заметки, цитаты, иллюстрации. В примере 1 в <aside> добавлен совет по приготовлению борща.

Пример 1. Использование <aside>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>aside</title> </head> <body> <article> <h1>Борщ</h1> <p>Мясо отварить до готовности. Промыть свёклу, очистить, нарезать соломкой и тушить с помидорами до полуготовности.</p> <p>Бульон процедить, мясо нарезать кусочками. В бульон добавить нарезанный дольками картофель, довести до кипения, опустить нарезанную соломкой свежую капусту и варить 10-15 минут, добавить пассерованные овощи, болгарский перец, нашинкованный тонкой соломкой, специи и довести до готовности.</p> <p>Готовому борщу дать настояться в течение 20-25 минут. При подаче к столу добавить сметану, мясо, зелень.</p> <aside> <h2>Хозяйке на заметку</h2> <p>Жёсткое мясо быстро станет мягким, если во время варки добавить в воду одну чайную ложку спирта.</p> </aside> </article> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 01.06.2020
Редакторы: Влад Мержевич