Секции для контента в HTML5 — div или section или article?
HTML5 стал важной ступенькой для концепции семантического кода. Он отстаивает идею, что документ должен быть структурирован и используемые вами теги должны передавать смысл.
Помимо прочего, теги и были введены чтобы сделать области с контентом более значимыми, чем просто . Но в каком случае мы должны использовать эти новые элементы и когда обычный предпочтительнее?
Элемент является элементом общего назначения. Но это не имеет особого смысла. Его цель заключается в группировке контента, который семантически не связан между собой. По сути, это совершенно бессмысленно для скрин ридеров, поэтому пользоваться данным методом нужно с осторожностью.
Мы настоятельно рекомендуем обращаться к элементу div только в крайнем случае, когда больше никакие другие элементы не подходят.
Рекомендация W3C
Элемент в основном используется для группировки контента и и позиционирования при помощи CSS. Например, как контейнер для других элементов.
Modal Title
Text goes here
Элемент является немного более конкретным, чем элемент . Он применяется к общему разделу контента, который может быть сгруппирован семантически.
Главное правило заключается в том, что элемент section уместно использовать только тогда, когда его содержимое может быть явно сгруппировано.
Рекомендация W3C
Поскольку содержимое тега имеет смысл только когда сгруппировано вместе, оно должно иметь «тему». «Тема» должна быть определена путем включения заголовка в содержимое, часто сразу после открывающего тега.
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.
###Article в section
Мы можем так же несколько тегов разместить внутри . Хорошим примером будет являться страница блога, на которой отображаются последние сообщения. Контейнером для всех последних постов будет тег , в то время как каждый отдельный отрывок записи может быть размечен тегом .
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 в article
Каждый индивидуальный тег может содержать в себе раздел 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 or section or article?
Combining the Elements
Структура 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
Спасибо за вопросы.
подразумевает, что внутри блока будет много текста. Если у вас блок с рекламой состоит из пары картинок, то это, увы, не тянет на «много текста» и, соответственно, на тег article. И под «много текста» я подразумеваю хотя бы несколько полноценных предложений. При выборе тегов стоит опираться на их содержимое.
и где тут общий смысл внутри 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
У вас же эта проблема решена очень элегантно
Правильно ли поймет меня робот от гугла или яндекса?
Разметка во фрагменте вполне адекватная. С другой стороны, ни Гугл, ни Яндекс не интересуют эти данные. Они для них равносильны обычному тексту. Главная суть всех разметок — это донести какую-то информацию потребителю. Можно сверстать всё на
, а кнопки и ссылки реализовать на JS. Но так как браузер уже знает как работать с и , то нет смыла не использовать. Потом есть вспомогательные технологии (например, скринридеры или клавиатурная навигация), которые дают возможность перемещаться между заголовками или регионами страницы. Для них мы должны использовать соответствующие теги ( — для заголовков, например) и атрибуты role . Для вспомогательных технологий были стандартизированы атрибуты, начинающиеся со слова aria , которые добавляют смыл в разметку гораздо больше, чем просто теги. Появились агрегаторы контента, которые хотели извлекать со страницы данные, а авторы этих страниц были не против делиться этим контентом. Так появились языки микро-разметки. Поисковики удачно запрыгнули на этот поезд предоставляя привлекательную карточку в выдаче в обмен на данные. Конечно они собирают всю доступную микро-разметку, но сейчас на приктике используют только ограниченное количество типов (хлебные крошки, рецепты, цены, адреса и т.п.). В общем, моя мысль о том, что разметка, микро-разметка, aria-атрибуты и т.п. применяются с учётом того, как она будет использоваться в реальной жизни. Без сомнений, процесс предоставления и потребления контента не может работать только в одну сторону. Как классические «спрос» и «предложение» не могут друг без друга. Если кто-то заинтересован в ItemList , то почему бы ему его не предоставить. С другой стороны, размечать всё и вся какими-то типами может быть чертовски накладно.
Константин , 04 апр 2018
Благодарю за столь развернутый ответ. Насчёт реализации списка оглавлений на джаве — уже думал об этом — это было бы лучшим вариантом. Я читал кажется в вашем твиттере, что вы обожаете джаву и вам покажется реализация на этом языке лёгкой задачей, но на у меня весьма поверхностные знания в программировании. Я просто пилю сайт для себя и своих пациентов. Насчёт атрибута aria и role. Т.е. по-вашему эти маркеры более понятны роботам, чем та же разметка от счема.орг? Кстати, а вам не приходило написать статью на более высококонкурентную фразу? К примеру «программирование на java»? Интересна выдача в Гугле)
Владимир Кузнецов , 04 апр 2018
Насчёт атрибута aria и role. Т.е. по-вашему эти маркеры более понятны роботам, чем та же разметка от счема.орг?
Константин, атрибуты aria-* и role нужны для вспомогательных технологий, а не для поисковиков. В предыдущем комментарии я хотел показать, что любые дополнительные «разметки» нужно применять с чётким пониманием кому она будет полезна. Если вы не знаете в чём её польза, то и добавлять не нужно. В общем, слоган «чем проще, тем лучше» тут действует безотказно.
Кстати, а вам не приходило написать статью на более высококонкурентную фразу? К примеру «программирование на java»? Интересна выдача в Гугле)
Вы имеете в виду JavaScript? Нет, у меня никогда не было такой цели.
Копирование материалов данного блога допускается только с разрешения автора.
Что такое DIV и SECTION?
Разница между использованием div и section (Октябрь 2023)
Файловая система - это способ организации информации на запоминающем устройстве, таком как жесткий диск компьютера. Общие файловые системы включают NTFS, FAT и т. Д.
Что такое CSS: что такое каскадные таблицы стилей?
Прежде чем вы сможете использовать каскадные таблицы стилей, вам нужно понять, что они собой представляют и как они используются в современном дизайне и разработке сайтов.
Что такое Google Fiber? И что такое Webpass?
Google Fiber - интернет-провайдер, специализирующийся на высокоскоростных интернет-соединениях. Он принадлежит Alphabet, материнской компании Google.
Section и div в чем разница
Покинул форум Сообщений всего: 170 Дата рег-ции: Авг. 2014
Помог: 0 раз(а)
Всем привет, Делая верстку с bootstrap(как 3 так и 4й) я имея много вложенных дивов частенько заменяю тег div тегом section. Это правильно решение ? Вроде пока проблем не замечал. Но может ли это вызвать проблемы ? Или есть лучшее решение? В чем разница между этими тегами ?
Отправлено: 05 Мая, 2018 - 17:01:47
Покинул форум Сообщений всего: 879 Дата рег-ции: Март 2017 Откуда: Германия, Бавария
Помог: 37 раз(а)
mstdmstd пишет:
Всем привет, Делая верстку с bootstrap(как 3 так и 4й) я имея много вложенных дивов частенько заменяю тег div тегом section. Это правильно решение ? Вроде пока проблем не замечал. Но может ли это вызвать проблемы ? Или есть лучшее решение? В чем разница между этими тегами ? Спасибо!
Добрый день! Тэги "говорят" роботам о том, что в них располагается смысловой раздела контента. например:
Спойлер (Отобразить)
CODE (html): скопировать код в буфер обмена
< p >Рыба плавает < / p >
< p >Птица летает < / p >
Тэги в отличие ничего о себе "не говорят".
Из этого следует, что если Вы хотите использовать , то желательно делать это аккуратно предварительно структурировав информацию.
