Главная -> Статьи о HTML5 -> Использование тега aside

Использование тега aside

Спецификация HTML5 постоянно изменяется и дополняется в зависимости от пожеланий разработчиков. Так случилось и с тегом aside. Если раньше мы говорили, что этот тег используется для выделения данных, каким-то образом связанных с содержанием конкретной страницы (например для выделения справочника терминов или ссылок на похожие статьи) внутри тега article, то теперь тег aside можно использовать вне <article>.

В чем же разница, спросите Вы? А вот в чем: если <aside> находится внутри <article>, то всё остается как прежде - информация внутри него должна быть связана с содержанием страницы, иначе внутри <aside> хранятся данные относящиеся ко всему сайту (например ссылки на другие блоги, навигация сайта и т.д.).

Давайте рассмотрим конкретный пример:

<!DOCTYPE html>
<body>
<header>
 <h1>Мой блог</h1>
</header>
<article>
 <h1>Заголовок моего блога</h1>
 <p>Блок содержания моего блога. Это текст каждой конкретной статьи.</p>
 <aside>
  <!-- Так как aside находится внутри тега article, парсер относит его содержания к самой статье. -->
  <h1>Словарь терминов</h1>
  <dl>
  <dt>Блог</dt>
  <dd>место где каждый желающий может рассказать о своих мыслях</dd>
  </dl>
 </aside>
</article>
<aside>
 <!-- Этот тег aside находится снаружи article, поэтому относится не к контенту страницы, а к сайту в целом. -->
 <h2>Меню</h2>
 <ul>
  <li><a href="#">Мои друзья</a></li>
  <li><a href="#">Мои другие друзья</a></li>
  <li><a href="#">Мои спонсоры</a></li>
 </ul>
</aside>
</body>

В заключение стоит напомнить, что стоит различать понятия aside и sidebar - это не одно и то же.