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 Владимир Кузнецов.
Все права защищены и принадлежат их владельцам.
Копирование материалов данного блога допускается только с разрешения автора.
Различие между элементами и в HTML
Элемент формирует семантические разделы веб-содержимого, выделяя логически тесно связанные блоки с уникальными заголовками. В противовес ему выступает универсальным контейнером, служащим для стилизации или работы со скриптами и не несущим семантического значения.
Пример использования :
Скопировать код
Рецепты
Рецепт шоколадного торта
Пример использования :
Скопировать код
Подпишитесь на нашу рассылку! используется для структурирования значимых разделов сайта, а обычно служит для работы со скриптами и стилизации, когда нет необходимости в семантическом элементе.
О семантике и доступности
В основу различий между и заложены семантика и доступность. Элемент помечает отдельные разделы страницы с определенной тематикой или назначением, что усовершенствует структуру контента и способствует усиленной навигационности. Это не только упростит взаимодействие с сайтом, но и может благоприятно отразиться на поисковой оптимизации, подчеркивая содержательную структуру страницы.
Не забудьте пометить такими атрибутами как aria-label , что в будущем облегчит восприятие содержимого для скринридеров и других средств доступности.
Связываем все вместе: стили и скрипты
В свою очередь, служит инструментом для CSS-стилизации и обеспечения интерактивности через JavaScript. Его отличительной особенностью является отсутствие семантического значения. Однако чрезмерное использование может ухудшить восприятие кода, приводя к "дивитису". Для предотвращения этой проблемы рекомендуется применять классы и идентификаторы с описательными названиями.
Выбираем правильный инструмент для задачи
- Плюсы : Элемент идеален для обозначения разнообразных тематических блоков в веб-контенте, подобно главам в книге.
- Плюсы : Если нужен простой блочный контейнер для стилизации или работы со скриптами, не добавляющий семантику, то подойдет как нельзя лучше.
Тщательно следите за балансом и стремитесь к ясности и доступности, не жертвуя ими ради удобства стилизации.
Чёткая структура, довольные пользователи (и разработчики)
Значимость структурирования
Хорошо организованный HTML-документ напоминает качественно составленную книгу: он обладает прозрачным оглавлением и чётко структурированными главами. Итак, делимся советами, как это достичь:
- Используйте для группировки содержимого, что усилит навигацию и SEO.
- Всегда помещайте заголовки сразу после . Использование пропуска заголовков обесценит использование семантического тега.
- отлично подходит, когда нужен элемент структуры без семантического значения, но следует избегать его необоснованного использования на коротство семантических тегов.
Распространённые ошибки
- Чрезмерное вложение: Избегайте частых ситуаций, когда вложен в .
- Пропуск заголовков: Без указания заголовков применение становится бару.
- "Дивитис": Излишнее использование трепит восприятие кода. Желательно использовать семантические элементы, где это возможно.
Визуализация
Постройте аналогию с домом, у которого есть комнаты (это секции контента) и каркасом (div'ами), где каждая комната имеет свое предназначение.
- = �� Указатель на комнаты с их функциональностью.
- = ⛓️ Структурный элемент, удерживающий содержимое, оставаясь при этом семантически нейтральным.
Так, – это четко обозначенное пространство в вашем "информационном доме", а – это элемент, скрепляющий все вместе и содержащий информацию без добавления смысла.
Полезные материалы
- HTML-стандарт для элемента section — авторитет в вопросах спецификации .
- : Секционный элемент – HTML | MDN — позволяет более глубоко понять использование .
- Элемент section | HTML5 Doctor — практические рекомендации по применению .
- : Элемент деления содержимого – HTML | MDN — содержательная информация об , ключевом элементе в верстке сайтов.
- Различия между и ? – Stack Overflow — мнения и обсуждения из мира разработчиков.
- HTML5 и алгоритмы структурирования документов — Smashing Magazine — анализ алгоритма структурирования документов с использованием .
- Как правильно структурировать ваш HTML | CSS-Tricks — приемы организации HTML-структуры с помощью .
Подскажите, пожалуйста, чем отличается элемент section от div?
Говорит программистам. Семантические теги позволяют другим верстальщикам понимать вашу разметку «лучше».
Например, использование тега «Aside» говорит о том, что это боковая панель. Тег «Section» говорит о том, что мы находимся на определенном «разделе страницы» (например, «Section class: «hero-image»> — раздел, содержимое которого — hero Image). А теперь представьте, если бы вместо семантических тегов использовался только Div-блок. Вся страница состояла бы только из дивов — ориентироваться в таком коде крайне тяжело.
Использование семантических тегов необходимо, чтобы сделать код «более читабельным» и меньшим по количеству. Семантический код действительно, хоть не столь сильно, но влияет на продвижение в поисковиках.
И так, в чём же отличие «Div» от «Section»? — Визуальных отличий (на стороне пользователя не будет). Семантические теги ориентированы на разработчиков для их наилучшего понимания структуры страницы и поисковых роботов, которые быстрее находят и различают элементы страницы.
Просто изучайте в интернете семантическую верстку. Вы, как начинающий верстальщик, отличий не находите, потому что вы — начинающий.
Остальные ответы
section - это элемент семантической разметки. "Семантической" - значит, у него есть смысл. Этот тег говорит о том, что его содержимое связно; например, относится к одной теме, или представляет собой какой-то конкретный раздел документа, отличный по смыслу от остальных разделов.
div - просто блочный элемент, без специального семантического значения. В нем может находиться что угодно, он своему содержимому смысла никак не придает и используется просто для оформления или привязки к js.
Зина СтешинаУченик (4) 5 лет назад
"Этот тег говорит о том" - кому говорит? Я вижу код и вижу отображение на странице. Разницы 0 между div и section. Вы говорите про какой-то абстрактный смысл. Где он есть? Где он используется на практике, а не в теории?