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

Примеры

HTML

htmlCodes

<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

HTML

htmlCodes

<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