div, section, article — где использовать каждый тег
С приходом спецификации HTML5 мы обзавелись набором новых тегов типа div, section, article итд. Не смотря что с выхода HTML5 прошёл уже почти десяток лет, ученики не перестают меня спрашивать, для чего необходим тот или инной тег. Простым ответом на этот вопрос будет — для построения семантических макетов. Но давайте разберёмся в деталях.
Итак, теги и были придуманы для более осмысленного семантического разделения вашего контента, как альтернатива единственному
Назначение элементов
Это общий элемент, служит для группировки любого типа контента. По умолчанию имеет блочное отображение. Никак дополнительно не связывет обёрнутный в него контент, что может привести к неприятным сюрпризам, при использовании экранных читалок. Официальная документация на W3C говорит о том, что элемент стоит использовать как крайнюю меру, когда нет возможности найти более подходящий. По этому рекомендуется использовать этот тег для группировки других элементов и последующей стилизации при помощи CSS, например для враппера страницы.
Наши возможности
.
Наши преимущества
.
Элемент section подразумевает более конкретное применение. Секция объединяет контент семантически связанный между собой, например блок новостей, преимуществ или услуг на вашем лендинге. Поскольку секция имеет логику формирования контента на странице, обязательно необходимо проставить заголовок прямо в начале секции.
Наш блог
Тег article предполагает ещё более конкретное применение по сравнению в секцией. Article используется в контексте сильной семантической связи контента, в нём так же как и в секции обязательно указывать заголовок. При этом контент как не трудно догадатся из названия относится к содержимому статьи / страницы, должен быть независим от прочего оформления сайта и не терять смысла, если его показать в отрыве от всего сайта, так как именно подобным образом его используют экранные ассистенты и режим «для чтения» в браузерах.
Заголовок статьи
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона.
div, section или article
Итак когда какой элемент правильно использовать?
- Если конент никак между собой не связан — используйте ;
- Если контент имеет семантическую логику, и вложенные элементы которые можно объеденить в рамках единного смыслового блока — используйте ;
- Если контент имеет сильную семантическую взаимосвязь и может быть выделен из контекста сайта без ущерба смысловой нагрузки — используйте
Комбинирование тегов
Теги могут представлять собой комбинации, например если на нашем лендинге или главной странице, есть блок новостей, логично будет обернуть его в section, а тизеры статей в article
Блог
Статья 1
.
Статья 2
.
Кроме того, элемент article может содержать секции для объединения в себе связанной информации, а ещё можно вложить article самого в себя, когда мы хотим процитировать большую выдержку из других статей, или вложить рекомендуеммые / связанные статьи со ссылками. Не забывайте, что для цитирования кототких текстов грамотнее будет использовать тег blockquote.
Верстайте контент грамотно и Google полюбит ваши сайты =)
Структура HTML5 — div, section и article :: Хранитель заметок
В формате разметки HTML5 появились новые элементы, которые служат заменой для обычных блочных элементов с атрибутами class и id, например или .
Рассмотрим три элемента, которые легко можно спутать друг с другом:
- div — «базовый контейнер», который мы все знаем и любим. Это обычный блочный элемент без какого-либо семантического значения.
- section — «документ или раздел приложения». Обычно содержит верхний (header) и нижний (footer) колонтитулы. Это несколько схожих по смыслу статей, подраздел одной большой статьи, главная часть страницы (например, раздел новостей) или страница интерфейса с закладками.
- article — «независимая часть документа или сайта». Эта часть должна иметь смысл вне зависимости от остального содержания. Например, это может быть статья в блоге или форуме, комментарий. Так же как и section внутри этого тега могут размещать верхний и нижний колонтитулы.
Разница между div, section и article
В HTML4 div использовался как базовый элемент разметки. Он не имел особого семантического значения. Так же не было особых требований на его содержимое и взаимоотношение между ним внутри блока.
Элемент section
Новый элемент section очень похож на div , т.к. используется как контейнер, но он уже имеет особое семантическое значение — объекты, которые располагаются внутри него, объединены общим смыслом.
Так же этот элемент служит для разбивки текста на разделы.
Элемент article
Новый элемент article — это специальный вид section , который обозначает независимую и самодостаточную часть страницы. На его месте можно использовать section, но article добавляет больше семантического значения.
Что выбрать?
Если проводить аналогию с HTML4, то можно сравнить эти теги с p и blockquote. Оба тега — блочные элементы, но blockquote, как разновидность p, имеет значение «блок цитируемого текста». То же самое и с section и article: тег section обозначает близкий по смыслу текст, а тег article обозначает осмысленную часть этого текста.
Смущающим обстоятельством является то, что section может быть использована для различных частей страницы (главная колонка, раздел новостей и т.п. на одной странице) и содержать article, а так же для дробления большого article (т.е. использоваться внутри article).
Чтобы определиться, какой из элементов выбрать, можно использовать алгоритм:
- Будет ли содержимое иметь осмысленное значение само по себе, например, при публикации в RSS-потоке? Если да, то выбираем article
- Если части содержимого объединены общим значением, то выбираем section
- Наконец, если нет никакого семантического значения, то выбираем div
Элемент section , за редким исключением, не должен использоваться, если у него нет заголовка. Если при автоматическом построении содержания документа будут встречаться не именованные разделы, то, вероятно, разметка сделана не верно. Однако наличие не именованных элементов nav и aside может быть вполне типичным явлением.
Итак, элемент section не стоит использовать если:
- требуется блочный элемент для декорирования. Это функция элемента div
- в этом месте для разметки содержимого больше по смыслу подходят элементы article, aside или nav
- у раздела нет естественного заголовка
Элементы section и article используются аналогично div в HTML4. Они не должны встречаться внутри p, blockquote или address.
Ещё заметки со схожей тематикой
- Inline SVG для пиктограмм
- Охота за последним видимым элементом
- Разметка «хлебных крошек» с помощью microdata
Категории
Коментарии к заметке
Александр , 22 мар 2013
Хорошая, годная статья. Спасибо!
Липсум , 07 авг 2013
Спасибо, давно хотелось прочесть столь вменяемый и хороший текст по обозначенной теме. Всех благ автору!
Константин , 17 авг 2013
Чётко и по делу. Что, когда и где применять. лучше не нашёл, везде инфа или неполная, или неточная. Сайт в закладках полюбому.
дмитрий , 07 окт 2013
Спасибо, интересно и помогло, как раз разбираюсь с семантикой html 5
Виталий , 11 ноя 2013
Больше нечего добавить. Спасибо!
Сергей , 17 янв 2014
Отличная статья, особенно пример мне очень помог. Спасибо.
Данил , 23 апр 2014
Спасибо наконец разобрался что, к чему.
nikman , 11 мая 2014
Коротко и ясно 🙂
alex , 12 июл 2014
Полный бред, не нашел ни единственной причины, чтобы использовать section или article, вместо всеми любимого div’а. Это тоже самое, что утверждать, что для звонка нужно использовать iPhone 6, а не старенький самсунг, хотя в плане совершения звонка самсунг уже всем полюбился и нет нужды его чем то заменять.
Владимир Кузнецов , 12 июл 2014
Профессионалы применяют эти теги не из-за того, что они модные. Они нужны, чтобы наполнить разметку смыслом для вспомогательных технрологий, поисковиков, роботов и т.п. Вы можете верстать одними div-ами и вообще никакие другие теги кроме него не использовать. И это не шутка.
Максим , 29 мая 2015
Я так и не понял про отличие article от section. Ваш пример:
Но ведь можно вместо section написать article? Реклама это же самодостаточный раздел? он не зависит ни от чего другого… контент может быть один, а реклама вообще на другую тему… короче бредятина это все с этими элементами, только запутывает больше… дальше:
Свежие статьи
Заголовок статьи 1
Текст статьи
Заголовок статьи 2
Текст статьи
Из статьи про section — «…объекты, которые располагаются внутри него, объединены общим смыслом.» Разве в примере в section объекты объединены общим смыслом?
Свежие статьи «Заголовок статьи 1» = Автоваз выпускает новый автомобиль «Заголовок статьи 2» = Сборная России выиграла чемпионат мира
и где тут общий смысл внутри section не пойму?
Владимир Кузнецов , 29 мая 2015
Спасибо за вопросы.
и где тут общий смысл внутри section не пойму?
Вы сами его процитировали: Свежие статьи Про объединение нескольких статей тегом всё очень просто. Статьи выводятся списком. Раз они попали в список, то у этого списка есть заголовок. Он и отражает их общий смысл. Если к блоку section вы не можете придумать заголовок, то это используйте div . В вашем примере статьи связывает только то, что они были недавно опубликованы. Если вы посмотрите на список статей в какой-либо категории, то их общий смысл станет более очевидным.
Михаил , 28 июн 2015
Добрый день! А можно размещать рекламу adsence и виджет комментариев вконтакте между элементами article и main, в которых находится сама статья? Если да, то надо их еще окружать элементом aside или section?
Владимир Кузнецов , 30 июн 2015
Любая реклама и виджеты сторонних сайтов вставляются через JS. На момент загрузки документа их не существует. Поэтому никакая дополнительная разметка им не нужна — используй обычные
Александр , 18 ноя 2015
Добрый день, Владимир! Если я создам два сайта абсолютно идентичных, но в 1 случае — буду использовать только div, а во 2 — div, section, article, то браузеры будут охотнее и быстрее продвигать последний вариант? Влияет ли это на продвижение сайта?
Владимир Кузнецов , 18 ноя 2015
Александр, догадываюсь, что вы имели в виду поисковые системы, а не браузеры. Если не ошибаюсь, то они пока никак не распознают эти теги. Другими словами, они для краулера одинаковые.
Мурат , 17 мар 2017
все очень дохожчиво.. особенно аналогия с p и blockquote . только p и blockquote разве блочные элементы, я знал их как строчные
Владимир Кузнецов , 18 мар 2017
Спасибо. p и blockquote всегда были блочными элементами.
Константин , 27 мар 2018
Вопрос про разметку в комментариях к статье. У вордпресса в wp-includes/class-walker-comment.php Есть комменты для сайтов с разметкой HTML5. Почему у вас не размечены комментарии тегом артикл? Это я к тому, что в вордпресс толковые реята и может они правы насчет этой размтеки?
Константин , 27 мар 2018
Jurassic Park
Dinos were great!
Way too scary for me.
I agree, dinos are my favorite.
Владимир Кузнецов , 28 мар 2018
Хороший пример. В нём проиллюстрирована вложенная структура.
Константин , 29 мар 2018
Благодарю за ответ. У меня еще вопрос по вашей разметке. После проверки в валидаторе в вашем Head выает такое:
Error: Attribute itemprop not allowed on element meta at this point. From line 53, column 1; to line 53, column 229 crodata">↩↩
У меня вопрос очередной. Чем грозят подобные ошибки при ранжировании сайта? Мне нравится ваше решение по поводу микроразметки сайта. И я взял ее для себя на вооружение. Потому и копаюсь в вашем коде))
Владимир Кузнецов , 29 мар 2018
Константин, смотрите, валидатор HTML-разметки знает стандарты, которым должен соответствовать документ. Но он понятия не имеет о разметках типа microdata, RDFa, Open Graph, Twitter Cards и многих других. У него нет задачи валидировать их. Соответственно он будет показывать ошибки и предупреждения на данные, о которых он не знает. Понимаете? Если вас интересует как какая-то поисковая система или социальная сеть воспринимает контент страницы, то пользуйтесь инструментами валидации, которые предоставляют эти платформы.
Константин , 30 мар 2018
Это снова я) Вы скрыли h1. Для чего? Он не лезет в общую концепцию дизайна? Заранее благодарен за ответ
Владимир Кузнецов , 31 мар 2018
Константин, этот элемент нужен, чтобы сформировать правильную структуру документа . Но в дизайне мне этот дублирующий заголовок не нужен, поэтому я и скрыл его. Чтобы не плодить дубликатов, нужно убрать на странице статьи. Вся страница — это и есть статья.
Константин , 31 мар 2018
Просто, чем больше я разбираю ваш html код, тем больше открываю для себя новостей и все больше появляются вопросы. Хотелось бы почитать статью от вас про код вашего сайта и узнать — почему вы выбрали в коде то или иное решение. С тем же h1. Во всех руководствах по СЕО, категорически заявляют о важности не скрывать контент и уж тем более в таком теге. Вы же сделали все наоборот и скрыли его пометив классом visuallyhidden при этом не получив карательных санкций от поисковиков. Почему вы не вы используете теги nav и main. Ведь если использовать их в вашей разметке, то теряется правильная структура заголовков (если анализировать с помощью html5 outliner). Этого нигде не прочитать в русском интернете.
Владимир Кузнецов , 31 мар 2018
Да, понимаю, что мои эксперименты выглядят бредово. Область SEO окружена мистикой и суевериями. Люди просто делают то, что пишут другие люди, не вдаваясь в суть (типа, наши деды так делали, отцы так делали и мы будем так делать), и тем самым излишне ограничивают себя. Я не стесняюсь почитать спецификации, подумать над ними и соединить разные требования, избежав противоречий. В большинстве случаев так упарываться не нужно.
Константин , 31 мар 2018
Если вы про экспериментsы с тегами nav и main, то это отнюдь не бредово. Я как раз вчера был озадачен ответом Untitled Section на проверку разметки заголовков в html5 outliner. Выяснил, что проблема в том, что он требует заголовки в nav и body. У вас же эта проблема решена очень элегантно). У меня очередной вопрос. Хочу внутри статьи использовать блок с содержанием (список оглавлений в статье):
Правильно ли поймет меня робот от гугла или яндекса?
Владимир Кузнецов , 31 мар 2018
У вас же эта проблема решена очень элегантно
Правильно ли поймет меня робот от гугла или яндекса?
Разметка во фрагменте вполне адекватная. С другой стороны, ни Гугл, ни Яндекс не интересуют эти данные. Они для них равносильны обычному тексту. Главная суть всех разметок — это донести какую-то информацию потребителю. Можно сверстать всё на
Константин , 04 апр 2018
Благодарю за столь развернутый ответ. Насчёт реализации списка оглавлений на джаве — уже думал об этом — это было бы лучшим вариантом. Я читал кажется в вашем твиттере, что вы обожаете джаву и вам покажется реализация на этом языке лёгкой задачей, но на у меня весьма поверхностные знания в программировании. Я просто пилю сайт для себя и своих пациентов. Насчёт атрибута aria и role. Т.е. по-вашему эти маркеры более понятны роботам, чем та же разметка от счема.орг? Кстати, а вам не приходило написать статью на более высококонкурентную фразу? К примеру «программирование на java»? Интересна выдача в Гугле)
Владимир Кузнецов , 04 апр 2018
Насчёт атрибута aria и role. Т.е. по-вашему эти маркеры более понятны роботам, чем та же разметка от счема.орг?
Константин, атрибуты aria-* и role нужны для вспомогательных технологий, а не для поисковиков. В предыдущем комментарии я хотел показать, что любые дополнительные «разметки» нужно применять с чётким пониманием кому она будет полезна. Если вы не знаете в чём её польза, то и добавлять не нужно. В общем, слоган «чем проще, тем лучше» тут действует безотказно.
Кстати, а вам не приходило написать статью на более высококонкурентную фразу? К примеру «программирование на java»? Интересна выдача в Гугле)
Вы имеете в виду JavaScript? Нет, у меня никогда не было такой цели.
© 2009–2023 Владимир Кузнецов.
Все права защищены и принадлежат их владельцам.
Копирование материалов данного блога допускается только с разрешения автора.
Когда лучше использовать section и когда div?
Не понятно, почему вы не можете применить container к section и делаете лишнюю обертку при наличии section.
А тег выбирайте исходя из семантики, т.е. его смысла.
Обычно можно проверять так: если вы можете придумать адекватный заголовок содержимому, а не "блок в котором валяются и контакты и 3 товара из спец.предложения", то это section или article.
А если это обертка ради обертки, то div.
В чем разница между и ?
Элемент представляет собой общий раздел документа или приложения. Раздел в этом контексте является тематической группировкой содержимого. Каждый section должен быть определен, обычно включая заголовок (элемент h1-h6) в качестве дочернего элемента . Примерами разделов будут главы, различные вложенные страницы в диалоговом окне с вкладками или нумерованные разделы диссертации. Домашняя страница веб-сайта может быть разделена на разделы для введения, новостных элементов и контактной информации. . Элемент не является общим элементом контейнера. Когда элемент нужен только для стилизации или для удобства для скриптования, авторам рекомендуется использовать элемент вместо этого. Общее правило заключается в том, что элемент подходит только в том случае, если содержимое элемента будет явно указано в наброске документа.
Элемент вообще не имеет особого значения. Он представляет его дочерние элементы. Он может быть использован с атрибутами class , lang и title для разметки семантики, которая является общей для группы последовательных элементов. Примечание: Авторы настоятельно рекомендуют рассматривать элемент в качестве крайнего элемента, когда другой элемент не подходит. Использование более подходящих элементов вместо элемента позволяет улучшить доступность для читателей и упростить поддержку для авторов.
(https://www.w3.org/TR/html/grouping-content.html#the-div-element) Разделы наиболее актуальны в навигации по ориентирам для вспомогательных технологий. Чтобы появиться в контуре документа или списке ориентиров, им нужно имя, которое можно присвоить с помощью aria-label , aria-labelledby или title :
Например, VoiceOver на Mac может предоставить контур для перехода непосредственно к этому разделу.
Поделиться 04 августа 2011 в 12:10
Поделиться 04 августа 2011 в 10:34
Просто наблюдение - не нашел никакой документации, подтверждающей это Если раздел содержит другой раздел, то заголовок h1 во внутреннем разделе отображается в шрифте меньшем, чем заголовок h1 во внешнем разделе. При использовании div вместо раздела, внутренний заголовок h1 div отображается в виде h1.
Level1
some text Level2
some more text-- Заголовок Level2 - отображается в шрифте меньшем, чем заголовок Level1. При использовании CSS для окраски заголовка h1, внутренний h1 также был окрашен (ведет себя как обычный h1). То же самое происходит в Firefox 18, IE 10 и Chrome 28.
Поделиться 01 августа 2013 в 14:28
Vs
Круг 1
: Элемент HTML (или элемент разделения HTML-документа) является общим контейнером для содержимого потока, который по своей природе ничего не представляет. Он может использоваться для группировки элементов для целей стилизации (используя атрибуты класса или идентификатора) или потому, что они имеют общие значения атрибутов, такие как lang.Он должен использоваться только тогда, когда другой семантический элемент (например, или ) не подходит. : Элемент раздела HTML ( ) представляет собой общий раздел документа, то есть тематическую группировку содержимого, обычно с заголовком.
Круг 2
: Поддержка браузеров 
: Поддержка браузеров Цифры в таблице указывают первую версию браузера, которая полностью поддерживает элемент. 
В этом смысле, div имеет значение только с точки зрения чистого CSS или DOM, в то время как раздел также имеет значение для семантики и, в ближайшем будущем, для индексации поисковыми системами.
Поделиться 17 июня 2014 в 12:00
В стандарте HTML5 элемент
Поделиться 29 апреля 2016 в 14:51
Будьте осторожны, не используя тег section в качестве замены элемента div. Тег section должен определять значимый регион в контексте body. Семантически, HTML5 рекомендует нам определить наш документ следующим образом:
Эта стратегия позволяет веб-роботам и автоматизированным читателям экранов лучше понимать поток вашего контента. Эта разметка четко определяет, где содержится основной контент вашей страницы. Конечно, заголовки и нижние колонтитулы часто встречаются на сотнях, если не тысячах страниц внутри веб-сайта. Тег section должен быть ограничен объяснением того, где содержится уникальный контент. В теге section мы должны продолжать разметку и управление контентом с помощью тегов HTML, которые находятся ниже в иерархии, таких как h1, div, span и т.д. На большинстве простых страниц должен быть только один тег section, а не несколько. Пожалуйста, также учтите, что есть другие интересные теги HTML5, которые похожи на section. Рассмотрите возможность использования article, summary, aside и других в вашем документе. Как вы можете видеть, эти теги еще больше улучшают нашу возможность определения основных областей HTML документа.
Поделиться 15 мая 2016 в 12:06
Поделиться 04 августа 2011 в 12:13
Использование
Поделиться 19 января 2018 в 07:28
Тег раздела предоставляет более семантический синтаксис для html. div - это общий тег для раздела. Когда вы используете тег раздела для соответствующего содержимого, он также может быть использован для оптимизации поисковых систем. Тег раздела также упрощает разбор html. Для получения дополнительной информации, обратитесь к http://blog.whatwg.org/is-not-just-a-semantic
Поделиться 04 августа 2011 в 10:37
Элемент HTML представляет собой общий раздел документа, то есть тематическую группировку содержимого, обычно с заголовком. Каждый должен быть определен, обычно путем включения элемента заголовка ( - ) как дочерний элемент элемента . Для получения подробной информации, пожалуйста, перейдите по ссылке.
- http://www.w3schools.com/tags/tag_section.asp
- https://developer.mozilla.org/en/docs/Web/HTML/Element/section
Элемент HTML (или элемент разделения документа HTML) является общим контейнером для содержимого потока, который по своей сути ничего не представляет. Он может использоваться для группировки элементов для целей стилизации (используя атрибуты класса или идентификатора), или потому, что они имеют общие значения атрибутов, такие как lang. Он должен использоваться только тогда, когда не подходит никакой другой семантический элемент (например, или ).
Вот несколько ссылок, которые обсуждают больше различий между ними:
- http://html5doctor.com/avoiding-common-html5-mistakes/
- https://teamtreehouse.com/community/use-div-or-section-element
- http://webdesign.about.com/od/html5tags/fl/div-vs-section.htm
Поделиться 16 мая 2016 в 09:45
Многие веб-сайты содержат HTML-код, например: для указания навигации, заголовка и нижнего колонтитула. Поэтому использовался для определения различных частей веб-страницы в html4, но не означает ничего особенного, поэтому в html5 было введено много семантических элементов - один из них, который дает достаточно информации для чтения с экрана, поисковых систем и браузеров и т.д., чтобы определить различные части веб-сайтов.
Основное отличие заключается в том, что вы используете только для определения частей веб-сайта. Это менее читаемо.
Если вы используете семантические элементы вместо тега div, они могут помочь улучшить читаемость вашего веб-сайта не только для людей для других программ (экранный читалка, поисковик и т.д.). Мы все еще можем использовать внутри семантических элементов в качестве контейнера.
Поделиться 07 августа 2022 в 13:06
Тег определяет разделы в документе, такие как главы, заголовки, колонтитулы или любые другие разделы документа.
Тег определяет разделение или раздел в HTML-документе.
Тег используется для группировки блочных элементов для форматирования их с помощью CSS.
Поделиться 11 мая 2015 в 03:11
Во-первых, важно отметить, что оба тега, и , используются на веб-страницах.
Сам тег не является общим контейнером на веб-странице, и в основном указывает на группировку содержимого внутри тега. Тег может быть использован в основном для содержимого с заголовками, колонтитулами или любым другим разделом веб-страницы, который может потребоваться поместить внутри раздела.
Для конкретного примера, домашнюю страницу веб-сайта можно разделить на несколько различных разделов, таких как О нас, Новости, Контактная информация и т.д.)
Ниже приведен пример HTML, как можно использовать тег .
С другой стороны, тег , также известный как тег division, является одним из наиболее часто используемых HTML-тегов. Он служит элементом блочного уровня веб-страницы, который представляет его дочерние элементы и обычно используется с атрибутами title и class - для целей стилизации или для обтекания абзацев в разделе, содержание которого должно быть присвоено похожим свойствам.
Ниже приведен пример HTML-тега, как можно использовать тег.
Title of the document .myDiv Animals
Rainforest Animals
Animals are amazing creatures.