Секции для контента в HTML5 — div или section или article?
HTML5 стал важной ступенькой для концепции семантического кода. Он отстаивает идею, что документ должен быть структурирован и используемые вами теги должны передавать смысл.
Помимо прочего, теги и были введены чтобы сделать области с контентом более значимыми, чем просто . Но в каком случае мы должны использовать эти новые элементы и когда обычный предпочтительнее?
Элемент является элементом общего назначения. Но это не имеет особого смысла. Его цель заключается в группировке контента, который семантически не связан между собой. По сути, это совершенно бессмысленно для скрин ридеров, поэтому пользоваться данным методом нужно с осторожностью.
Мы настоятельно рекомендуем обращаться к элементу div только в крайнем случае, когда больше никакие другие элементы не подходят.
Элемент в основном используется для группировки контента и и позиционирования при помощи CSS. Например, как контейнер для других элементов.
Modal Title
Text goes here
Элемент является немного более конкретным, чем элемент . Он применяется к общему разделу контента, который может быть сгруппирован семантически.
Главное правило заключается в том, что элемент section уместно использовать только тогда, когда его содержимое может быть явно сгруппировано.
Поскольку содержимое тега имеет смысл только когда сгруппировано вместе, оно должно иметь «тему». «Тема» должна быть определена путем включения заголовка в содержимое, часто сразу после открывающего тега.
Subscribe to the Newsletter
Тег является даже более конкретным, чем тег . Он так же применяется к семантически связанному разделу контента и должен иметь заголовок. Тем не менее его содержимое должно быть самодостаточным. Это означает что будучи изолированным от остальной части страницы оно по прежнему должно иметь смысл.
Цель тега в маркировке контента, например, в разметке блога.
Article Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quae similitudo in genere etiam humano apparet. Est, ut dicis, inquam.
##DIV или SECTION или ARTICLE?
###Так какой из тегов когда нужно использовать?
Если содержимое не является семантически связанным, стоит использовать . Если семантически связанное содержимое может быть автономным, то используйте тег . В противном случае используйте .
Попытаемся объединить различные элементы вместе.
Article в article
Элементы article можно вкладывать друг в друга. И хотя они по прежнему являются самодостаточными, предполагается, что содержимое внутреннего связано с внешним.
Article Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Another Article
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Мы можем так же несколько тегов разместить внутри . Хорошим примером будет являться страница блога, на которой отображаются последние сообщения. Контейнером для всех последних постов будет тег , в то время как каждый отдельный отрывок записи может быть размечен тегом .
Latest Blog Posts
Blog Post Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Blog Post Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Каждый индивидуальный тег может содержать в себе раздел section. Например, данный пост мог бы быть размечен следующим образом
Sectioning Content in HTML5 - div or section or article?
Overview of the Elements
div
The div element is the most general purpose element.
section
The section element is slightly more specific that a div
article
The article element is even more specific than a section
div, section, article — где использовать каждый тег
С приходом спецификации HTML5 мы обзавелись набором новых тегов типа div, section, article итд. Не смотря что с выхода HTML5 прошёл уже почти десяток лет, ученики не перестают меня спрашивать, для чего необходим тот или инной тег. Простым ответом на этот вопрос будет — для построения семантических макетов. Но давайте разберёмся в деталях.
Итак, теги и были придуманы для более осмысленного семантического разделения вашего контента, как альтернатива единственному
Назначение элементов
Это общий элемент, служит для группировки любого типа контента. По умолчанию имеет блочное отображение. Никак дополнительно не связывет обёрнутный в него контент, что может привести к неприятным сюрпризам, при использовании экранных читалок. Официальная документация на W3C говорит о том, что элемент стоит использовать как крайнюю меру, когда нет возможности найти более подходящий. По этому рекомендуется использовать этот тег для группировки других элементов и последующей стилизации при помощи CSS, например для враппера страницы.
Наши возможности
.
Наши преимущества
.
Элемент section подразумевает более конкретное применение. Секция объединяет контент семантически связанный между собой, например блок новостей, преимуществ или услуг на вашем лендинге. Поскольку секция имеет логику формирования контента на странице, обязательно необходимо проставить заголовок прямо в начале секции.
Тег article предполагает ещё более конкретное применение по сравнению в секцией. Article используется в контексте сильной семантической связи контента, в нём так же как и в секции обязательно указывать заголовок. При этом контент как не трудно догадатся из названия относится к содержимому статьи / страницы, должен быть независим от прочего оформления сайта и не терять смысла, если его показать в отрыве от всего сайта, так как именно подобным образом его используют экранные ассистенты и режим «для чтения» в браузерах.
Заголовок статьи
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона.
div, section или article
Итак когда какой элемент правильно использовать?
Если конент никак между собой не связан — используйте ;
Если контент имеет семантическую логику, и вложенные элементы которые можно объеденить в рамках единного смыслового блока — используйте ;
Если контент имеет сильную семантическую взаимосвязь и может быть выделен из контекста сайта без ущерба смысловой нагрузки — используйте
Комбинирование тегов
Теги могут представлять собой комбинации, например если на нашем лендинге или главной странице, есть блок новостей, логично будет обернуть его в section, а тизеры статей в article
Кроме того, элемент article может содержать секции для объединения в себе связанной информации, а ещё можно вложить article самого в себя, когда мы хотим процитировать большую выдержку из других статей, или вложить рекомендуеммые / связанные статьи со ссылками. Не забывайте, что для цитирования кототких текстов грамотнее будет использовать тег blockquote.
Верстайте контент грамотно и Google полюбит ваши сайты =)
The default CSS of browsers defines the font size for them. For example, Chrome defines the different font sizes for h1 at different levels of section :
Due to the semantic manner, the section elements are often used to build the outlines of the page. We should use the heading elements ( h1 — h6 ) inside section to indicate the summary of section.
section> h2>This section tells abouth2> section>
section> h2>Title of another sectionh2> section>
Good to know
Nowadays, HTML5 standard are supported in modern browsers. But in the old days when it is required to support non-HTML5 browsers such as IE 8, we have to do some additional tasks.
By default, the unknown elements are styled as display: inline , hence we need to reset the value for HTML5 elements:
