Что выбрать: div, section, article?..

Артемий Ломов

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

В частности, авторами перспективного стандарта нам было предложено множество разнообразных элементов секционирования контента — так, абсолютно новыми, не имевшими аналогов в прошлом, элементами этой категории являются: <section>, <article>, <nav>, <aside>, <hgroup>, <header> и <footer>. (Мы тут перечисляем их в том порядке, в котором они описаны в спецификации — по крайней мере, той ее версии, что была актуальна на момент написания заметки.)

Традиции использования новых структурных элементов еще, понятное дело, толком не успели сформироваться, поэтому неудивительно, что на многих страницах, создаваемых сегодня с использованием HTML5 увлеченными натурами в меру их собственного разумения, можно встретить весьма экзотические варианты сочетания новых и «старых» тегов разметки.

Похоже, что наибольшее количество странностей порождает использование элементов <section> и <article> — семантика остальных вроде бы как более самоочевидна.

Так, очень часто (ну, если это слово вообще применимо в отношении HTML5-сайтов, которые пока крайне немногочисленны в общей массе) можно наблюдать, что, увлекшись тягой ко всему новому, верстальщики лепят <section> везде, где только получается — ну, то есть, там, где пару лет назад они бы употребили <div>.

Такую практику никак нельзя счесть заслуживающей одобрения, поскольку элемент <section>, как и остальные новые элементы секционирования, в отличие от семантически нейтрального <div>, наделен четким предназначением. Элемент <section> надлежит использовать для тематической группировки контента — он может заключать в себе, например, главу большой статьи или, наоборот, включать в себя несколько размещенных на одной странице относительно коротких статей, объединенных какими-то общими признаками. Как правило, содержимое элемента <section> начинается с заголовка — или же, по крайней мере, подразумевается потенциальная возможность озаглавить такую порцию контента.

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

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

Буква спецификации никак не ограничивает возможную вложенность элементов <section> и <article> (ну и, разумеется, <div>) друг в друга. Валидатор разметки не поможет вам грамотно разметить содержимое страницы в соответствии с их предназначением — тут нужно руководствоваться здравым смыслом, всегда помня о том, что новые структурные элементы введены в HTML5 исключительно с той целью, чтобы мы имели возможность описать семантику тех или иных составляющих веб-страницы максимально точно. Например, на главной странице сайта несколько кратких анонсов материалов или постов блога, представленных каждый в виде элемента <article>, могут быть заключены внутрь одного <section>. А на относительно простой по структуре внутренней странице того же сайта, основное содержание которой — одна большая статья, эта самая статья может быть представлена в виде элемента <article>, а ее подразделы — в виде вложенных элементов <section>. Более того, скажем, пользовательские комментарии к этой статье (как вполне самодостаточные порции контента) могут быть размечены как самостоятельные вложенные элементы <article>.