Секции для контента в HTML5 — div или section или article?


Данный материал является вольным переводом статьи:
Ire Aderinokun SECTIONING CONTENT IN HTML5 - DIV OR SECTION OR ARTICLE?

HTML5 стал важной ступенькой для концепции семантического кода. Он отстаивает идею, что документ должен быть структурирован и используемые вами теги должны передавать смысл.

Помимо прочего, теги <section> и <article> были введены чтобы сделать области с контентом более значимыми, чем просто <div>. Но в каком случае мы должны использовать эти новые элементы и когда обычный <div> предпочтительнее?

Обзор элементов

DIV

Элемент <div> является элементом общего назначения. Но это не имеет особого смысла. Его цель заключается в группировке контента, который семантически не связан между собой. По сути, это совершенно бессмысленно для скрин ридеров, поэтому пользоваться данным методом нужно с осторожностью.

Мы настоятельно рекомендуем обращаться к элементу div только в крайнем случае, когда больше никакие другие элементы не подходят.

Рекомендация W3C

Элемент <div> в основном используется для группировки контента и и позиционирования при помощи CSS. Например, как контейнер для других элементов.


<div class="modal-container">
<section class="modal">
<h1>Modal Title</h1>
<p>Text goes here</p>
</section>
</div>

SECTION

Элемент <section> является немного более конкретным, чем элемент <div>. Он применяется к общему разделу контента, который может быть сгруппирован семантически.

Главное правило заключается в том, что элемент section уместно использовать только тогда, когда его содержимое может быть явно сгруппировано.

Рекомендация W3C

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


<section class="newsletter">

<h1>Subscribe to the Newsletter</h1>

<form> <!-- ... --> </form>
</section>

ARTICLE

Тег <article> является даже более конкретным, чем тег <section>. Он так же применяется к семантически связанному разделу контента и должен иметь заголовок. Тем не менее его содержимое должно быть самодостаточным. Это означает что будучи изолированным от остальной части страницы оно по прежнему должно иметь смысл.

Цель тега <article> в маркировке контента, например, в разметке блога.


<article class="post">
<h1>Article Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>Quae similitudo in genere etiam humano apparet. Est, ut dicis, inquam...</p>
</article>

DIV или SECTION или ARTICLE?

Так какой из тегов когда нужно использовать?

Если содержимое не является семантически связанным, стоит использовать <div>. Если семантически связанное содержимое может быть автономным, то используйте тег <article>. В противном случае используйте <section>.

Комбинирование элементов

Попытаемся объединить различные элементы вместе.

Article в article

Элементы article можно вкладывать друг в друга. И хотя они по прежнему являются самодостаточными, предполагается, что содержимое внутреннего <article> связано с внешним.


<article>

<h1>Article Title</h1>

<p class="author">John Smith</p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


<article>

<h2>Another Article</h2>

<p class="author">Jane Doe</p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</article>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

Article в section

Мы можем так же несколько тегов <article> разместить внутри <section>. Хорошим примером будет являться страница блога, на которой отображаются последние сообщения. Контейнером для всех последних постов будет тег <section>, в то время как каждый отдельный отрывок записи может быть размечен тегом <article>.


<section>

<h1>Latest Blog Posts</h1>

<article>

<h2>Blog Post Title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

</article>

<article>

<h2>Blog Post Title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

</article>
</section>

Section в article

Каждый индивидуальный тег <article> может содержать в себе раздел section. Например, данный пост мог бы быть размечен следующим образом


<article>
<h1>Sectioning Content in HTML5 - div or section or article?</h1>

<section>
<h2>Overview of the Elements</h2>
<section>
<h3>div</h3>
<p>The div element is the most general purpose element.</p>
</section>
<section>
<h3>section</h3>
<p>The section element is slightly more specific that a div</p>
</section>
<section>
<h3>article</h3>
<p>The article element is even more specific than a section</p>
</section>
</section>

<section>
<h2>div or section or article?</h2>
<!-- ... -->
</section>

<section>
<h2>Combining the Elements</h2>
<!-- ... -->
</section>

</article>