Данный материал является вольным переводом статьи:
Ire Aderinokun SECTIONING CONTENT IN HTML5 - DIV OR SECTION OR ARTICLE? + добавлен материал от автора.
HTML5 принес нам семантику в код. Идея в том, что документ должен быть структурирован и теги должны передавать смысл.
Теги <section>, <article> и <aside> были введены чтобы сделать блок с контентом более значимым, чем просто <div>. Но в каком случае мы должны использовать эти новые элементы и когда обычный <div> предпочтительнее?
Обзор элементов
DIV
Элемент <div> является универсальным блочным элементом. Предназначен для группировки контента, который семантически не связан между собой. <div> совершенно бессмысленно для скрин ридеров, поэтому пользоваться данным методом нужно с осторожностью.
Мы настоятельно рекомендуем обращаться к элементу div только в крайнем случае, когда больше никакие другие элементы не подходят.
Рекомендация W3C
Элемент <div> чаще всего используется как контейнер для других элементов.
SECTION
Элемент <section> применяется к общему разделу контента, который может быть сгруппирован семантически.
Главное правило заключается в том, что элемент section уместно использовать только тогда, когда его содержимое может быть явно сгруппировано.
Рекомендация W3C
Cодержимое тега <section> имеет смысл контент внутри него сгруппирован и имеет «тему». «Тему» необходимо указать с помощью заголовка.
ARTICLE
Тег <article> еще более независимый, чем тег <section>. Он так же применяется к семантически связанному блоку контента и должен иметь заголовок. Его содержимое должно быть независимым и самодостаточным. Если тег <article> изолировать от остальной части страницы, по прежнему должен иметь смысл.
Чаще всего тег <article> применяется к статье сайта, новости, сообщений блога, форума или комментариев.
Aside?
Тег <aside>, тоже применяется к блоку для семантического указания раздела. Но в отличии от <section> и <article>, тег <aside> представляет блок, контент которого не имеет или имеет косвенное отношение к содержимому документа. Он так же независим от остального контента и может быть буквально вырван из одной странице и вставлен в другую, не потеряв актуальность.
Чаще всего применяться для боковых панелей, блоков с рекламными баннерами, сносок и другой информации, которая отделена от основного содержимого страницы.
DIV или SECTION или ARTICLE?
Какой же тег использовать
Если с тегом <aside> я думаю все и так понятно, но давайте разберемся с остальными.
Если контент не является семантически связанным, используем <div>. Если контент семантически связан и независим от остального, то используйте тег <article>, а если контент связан с содержимым всей страницы используем <section>.
Комбинирование элементов
Попытаемся объединить различные элементы вместе.
Article в article
Элементы article можно вкладывать друг в друга. Они по прежнему являются самодостаточными, но предполагается, что содержимое внутреннего <article> связано с внешним.
Например, если в сообщении в блоге, содержится цитата из другого сообщения, она может обернута в свой <article>.
Article в Section
Мы можем так же несколько тегов <article> обернуть в <section>.
Например страница блога, на которой отображаются последние сообщения. Контейнером для всех постов будет тег <section>, а каждый пост обернут тегом <article>.
Section в article
Каждый тег <article> может иметь один или несколько <section>.
Например, этот пост мог бы быть размечен следующим образом