Содержание:
HTML5 - Элемент aside
Статья, в которой рассматривается HTML-элемент aside из категории sectioning.
Назначение элемента aside
Элемент aside предназначен для создания секции в документе, содержимое которого имеет косвенное отношение к окружающему его контенту, а также имеет смысл отдельного от него. Такие разделы можно сравнить с боковыми колонками (sidebar) в печатной типографии.
Семантика элемента aside зависит от того, где он находится. Если данный элемент вложен внутрь некоторого секционного элемента, то он рассматривается по отношению к его контенту. А если элемент aside не имеет секционных элементов в качестве своих предков, то он уже будет относиться ко всему документу. Например, если рекламный контент расположен внутри элемента aside и не имеет в качестве своих предков секционных элементов, то он будет относиться ко всему документу.
HTML
<aside>
<h1>Заголовок секции</h1>
<p>Содержимое секции…</p>
</aside>Кроме этого при создании разметки веб-страницы необходимо знать то, что элемент aside не может содержать элемент main в качестве своего потомка.
Применение элемента aside
Элемент aside обычно применяется для разметки на сайте боковых панелей, блоков рекламы, группирования элементов nav и другого контента, который может быть рассмотрен отдельно от основного содержимого страницы. При этом не стоит забывать о том, что элемент aside создаёт секции в структуре документа.
Рассмотрим на следующем примере роль элемента aside в структуре страницы:
HTML
<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):
HTML
[document] Заголовок документа
[aside] Untitled
[aside] Untitled
[section] Последние посты
[article] Тема поста
[article] Тема поста
[aside] Untitled
Обратите внимание на то, что многие авторы при создании структуры документа, также задумываются о визуальном отображении элементов, из которых она состоит. Возможно, некоторые структурные элементы необходимо оформить с помощью стилей CSS. Например, можно сделать так, чтобы блоки aside визуально отличались от остального содержимого страницы. Это может их сделать понятными не только для поисковых роботов, но и для людей (посетителей сайта).
По причине того, что в реальном мире используется спецификация от WHATWG.
html.spec.whatwg.org/multipage/sections.html#the-aside-element
что сама W3c совсем недавно признала.
И ситуация эта ровно с момента появления стандарта. то есть с 2014 года.
Во вторых, все что Вы перевели машинным переводчиком, полностью соответствует тому что сказал я.
И совершенно не соответствует тому что написано вверху в статье.
В третьих, в английском языке севооборот tangentially использую в обозначении вещей связь которых с с текущим объектом косвенная, поверхностная, не имеющая значения — практически равная нулю.
Что опять соответствует тому что сказал я.
Ну и в четвертых,
Спецификация HTML5 в части семантики в ее текущей редакции, позволяет описать семнатически любой контент, на странице любой сложности. Если бы aside был чем то иным нежели секцией исключающей из общего потока несущественный контент, то тогда, в силу того что альтернатив aside нет, вы бы не смогли верстать страницы соблюдая семантику.
Так что с какой тсороны не поверни, хоть со стороны документации, хоть со стороны здравого смысла, то что написано в статье выше — ложь. То же что говорю я, соответствует как спецификации, так и тому самому здравому смыслу.
Это совершенно не верно, по той причине что тег body является семантическим тегом равным по общему смыслу тегу article.
Специфика тега aside такова, что он вообще ни при каких условиях не может к чему то относиться. Потому как его задача, это выделить контент который не должен оказывать влияние на контент секции.
В стандарте элемент aside имеет следующее описание:
Если это описание перевести, то получается следующее:
Элемент aside представляет собой секцию страницы, состоящей из контента тангенциально связанного с контентом вокруг aside элемента, и который можно рассматривать отдельно от этого содержимого. Такие разделы напоминают боковые панели в печатной типографии.
Этот элемент можно использовать для таких типографских эффектов как цитаты или боковые панели, для рекламы, для групп nav элементов и другого контента, который считается отдельным от основного контента страницы.