Структура 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 от div?
Говорит программистам. Семантические теги позволяют другим верстальщикам понимать вашу разметку «лучше».
Например, использование тега «Aside» говорит о том, что это боковая панель. Тег «Section» говорит о том, что мы находимся на определенном «разделе страницы» (например, «Section class: «hero-image»> — раздел, содержимое которого — hero Image). А теперь представьте, если бы вместо семантических тегов использовался только Div-блок. Вся страница состояла бы только из дивов — ориентироваться в таком коде крайне тяжело.
Использование семантических тегов необходимо, чтобы сделать код «более читабельным» и меньшим по количеству. Семантический код действительно, хоть не столь сильно, но влияет на продвижение в поисковиках.
И так, в чём же отличие «Div» от «Section»? — Визуальных отличий (на стороне пользователя не будет). Семантические теги ориентированы на разработчиков для их наилучшего понимания структуры страницы и поисковых роботов, которые быстрее находят и различают элементы страницы.
Просто изучайте в интернете семантическую верстку. Вы, как начинающий верстальщик, отличий не находите, потому что вы — начинающий.
Остальные ответы
section - это элемент семантической разметки. "Семантической" - значит, у него есть смысл. Этот тег говорит о том, что его содержимое связно; например, относится к одной теме, или представляет собой какой-то конкретный раздел документа, отличный по смыслу от остальных разделов.
div - просто блочный элемент, без специального семантического значения. В нем может находиться что угодно, он своему содержимому смысла никак не придает и используется просто для оформления или привязки к js.
Зина СтешинаУченик (4) 4 года назад
"Этот тег говорит о том" - кому говорит? Я вижу код и вижу отображение на странице. Разницы 0 между div и section. Вы говорите про какой-то абстрактный смысл. Где он есть? Где он используется на практике, а не в теории?
Section и div в чем разница
Здесь могла бы быть ваша реклама
Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel
Помог: 3 раз(а)
Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.
Само собой я знаю что ответят мне тут же, и если я посмотрю
на сообщения на форуме, то пойму что в общем то я и не ошибаюсь.
Но еще я точно замечу, что очень мало тем, в которых всего два ответа :
вопрос автора и еще два сообщение вида Ответ + Спасибо
После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..
Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос - где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.
Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.
На последок как оно происходит на форумах
Цитата:
Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум - из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится - тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите - лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево - дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.
Отредактировано модератором: Uchkuma, 26 Апреля, 2011 - 10:21:12