Главная » Полезные статьи » HTML-верстка » Пересмотренный тег aside
Распечатать статью

Пересмотренный тег aside

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

Так как спецификация HTML 5 еще не финализирована, постоянно появляются какие-то изменения, направленные на усовершенствование и устранение недостатков. В случае с тегом <aside>, который сперва не был воспринят как позитивное нововведение, были сделаны небольшие поправки на основе отзывов от web-сообщества. В этой статье мы рассмотрим, что именно изменилось.

 

Новое определение тега <aside>

Ранее, когда мы обсуждали этот тег в статье «Понимание тега <aside>», его определение основывалось на том, что <aside> должен использоваться для контента, косвенно относящегося к содержимому вокруг него, как, например, для выделения справочника терминов или ссылок на похожие статьи. Не было речи о том, что этот элемент подходит для отображения второстепенного контента, в общем связанного с темой сайта. Такой блок, известен как «сайдбар» или «боковая панель».

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

Примеры использования <aside> в двух разных аспектах

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

Два варианта использования тега <aside> можно продемонстрировать на следующих примерах:

<body>
  <header>
    <h1>Мой блог</h1>
  </header>
  <article>
    <h1>Мой пост</h1>
    <p1>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
    <aside>
      <!-- Так как этот тег расположен внутри статьи, парсер должен понять,
      что его содержимое непосредственно относится к самой статье. -->
      <h1>Словарь терминов</h1>
      <dl>
        <dt>Lorem</dt>
        <dd>ipsum dolor sit amet</dd>
      </dl>
    </aside>
  </article>
  <aside>
    <!-- Этот тег находится за пределами статьи. Его содержимое
    относится к этой странице, но строго не привязано к статье выше. -->
    <h2>Ссылки на другие блоги</h2>
    <ul>
      <li><a href="#">Мой друг</a></li>
      <li><a href="#">Мой другой друг</a></li>
      <li><a href="#">Мой лучший друг</a></li>
    </ul>
  </aside>
</body>

Заключение

Отныне, элемент <aside> может отображать второстепенный контент, если он находится за пределами <article>. Помните, что <aside> и, тем более, второстепенный контент – это не обязательно «сайдбар». Стиль содержимого не должен обязывать использовать элемент. Для контента, который не раскрывает основную тему статьи (или страницы), но имеет к ней отдаленное отношение, тег <aside> – это то, что нужно, не зависимо от его внешнего оформления.

Источник:  css-live.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи