Тег <aside>

Тег <aside> относится к семантическим и простыми словами его можно назвать тегом боковой колонки. Как правило, раньше она имела class или id – "sidebar", при верстке дивами (<div>). Если на сайте две колонки, то они назывались "left-bar" и "right-bar". В боковых колонках обычно размещается реклама, новости, заметки и так далее. Теперь же колонки нужно оборачивать в тег <aside>.

К тегу <aside> применяются универсальные атрибуты. <aside> парный тег и имеет обязательный закрывающий тег </aside>.

Все браузеры отображают корректно тег <aside> и его стили, кроме Internet Explorer до версии 8.0 и чтобы избежать этой проблемы необходимо применять специальный скрипт, которы вы увидите в примере.

Пример:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Тег ASIDE</title>
    <meta charset="utf-8">
    <script>
    document.createElement('aside');
    document.createElement('article');
    </script>
    <style>
    aside {
     background: #FFFF00;
     padding: 5px;
     width: 220px;
     float: right;
    }
    article {
     margin-right: 250px;
     display: block;
    }
    </style>
  </head>
  <body>
    	<h1>Истории</h1>
      <aside>
      	<p>Другие истории</p>
        <p>Реклама</p>
        <p>Другая информация</p>
      </aside>
      <article>
    	<p>История о том как Вини-Пух и Пятачок пришли в гости к Кролику.</p>
      </article>
  </body>
</html> 
            
Смотреть пример