HTML5 - Элемент aside

Статья, в которой рассматривается HTML-элемент aside из категории sectioning.

HTML 5 - Элемент aside

Элемент aside предназначен для создания секции в документе, содержимое которого имеет косвенное отношение к окружающему его контенту, а также имеет смысл отдельного от него. Такие разделы можно сравнить с боковыми колонками (sidebar) в печатной типографии.

Семантика элемента aside зависит от того, где он находится. Если данный элемент вложен внутрь некоторого секционного элемента, то он рассматривается по отношению к его контенту. А если элемент aside не имеет секционных элементов в качестве своих предков, то он уже будет относиться ко всему документу. Например, если рекламный контент расположен внутри элемента aside и не имеет в качестве своих предков секционных элементов, то он будет относиться ко всему документу.

<aside>
  <h1>Заголовок секции</h1>
  <p>Содержимое секции…</p>
</aside>

Кроме этого при создании разметки веб-страницы необходимо знать то, что элемент aside не может содержать элемент main в качестве своего потомка.

Элемент aside обычно применяется для разметки на сайте боковых панелей, блоков рекламы, группирования элементов nav и другого контента, который может быть рассмотрен отдельно от основного содержимого страницы. При этом не стоит забывать о том, что элемент aside создаёт секции в структуре документа.

Рассмотрим на следующем примере роль элемента aside в структуре страницы:

<body>
  <!-- Заголовок документа (h1) -->
  <header>
    <h1>Мой блог</h1>
    <p>...</p>
  </header>
  <!-- Содержимое, косвенно связанное со страницей -->
  <aside>
    <!-- Элемент aside должен содержать контент, который будет косвенно должен быть связан с основным содержанием страницы -->
    ...
  </aside>
  <!-- Содержимое, косвенно связанное со страницей -->
  <aside>
    <!-- Этот элемент aside также должен содержать контент, который косвенно должен быть связан с основным содержанием страницы.  -->
    ...
  </aside>
  <!-- Основное содержимое страницы -->
  <section>
    <h2>Последние посты</h2>
    <!-- Пост -->
    <article>
      <!-- Последний пост блога -->
      <h3>Тема поста</h3>
      <p>Краткое описание поста...</p>
    </article>
    <!-- Пост -->
    <article>
      <!-- Предпоследний пост блога -->
      <h3>Тема поста</h3>
      <p>Краткое описание поста...</p>
      <!-- Содержимое, косвенно связанное с предпоследним постом -->
      <aside>
        <!-- Этот элемент aside расположен внутри элемента article и, следовательно, должен содержать контент, который косвенно связан с ним -->
        ...
      </aside>
    </article> 
  </section>
  <!-- Футер страницы -->
  <footer>
    ...
  </footer>
</body>

Вышеприведенный пример будет иметь следующую структуру (outline):

[document] Заголовок документа
  [aside] Untitled
  [aside] Untitled
  [section] Последние посты
    [article] Тема поста
    [article] Тема поста
      [aside] Untitled

HTML 5 - Применение элемента aside

Обратите внимание на то, что многие авторы при создании структуры документа, также задумываются о визуальном отображении элементов, из которых она состоит. Возможно, некоторые структурные элементы необходимо оформить с помощью стилей CSS. Например, можно сделать так, чтобы блоки aside визуально отличались от остального содержимого страницы. Это может их сделать понятными не только для поисковых роботов, но и для людей (посетителей сайта).



   HTML и CSS 0    1361 +1

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.