Section и div в чем разница
Как правильно использовать теги div, section и article.
Всем привет! В этой статье мы рассмотрим, как правильно использовать теги div, section и article в HTML5.
Помимо всем известного и очень часто используемого тега div, в HTML5 появились новые, семантические теги, которые позволяют более четко разделить контент на вашем сайте и тем самым помочь поисковым роботам в их нелегкой работе. Однако, к сожалению, многие верстальщики еще не научились их использовать правильно, особенно те, которые обозначены в начале статьи. Надеюсь, что после прочтения данной статьи вопросы по этому поводу, если и не пропадут совсем, то их станет, как минимум, меньше. Итак, приступим.
Если вы откроете сайт W3C, то можете найти там рекомендацию, смысл которой заключается в том, что использовать данный тег нужно для семантически несвязанного между собой контента. Очень часто div используют для того, чтобы сгруппировать какой-нибудь контент, который затем нужно спозиционировать или как-то оформить с помощью css.
Section
Данный элемент используется, наоборот, для семантически связанного между собой контента. Содержимое такого тега должно обладать общей темой. К примеру, новости на новостном сайте:
Последние новости
Article
Этот элемент также должен обладать общей темой и содержать семантически связанный между собой контент, однако этот самый контент должен быть автономен, т.е. вы можете взять отдельный article, убрать его со страницы, но при этом смысл содержимого внутри него не потеряется. Все на том же примере новостного сайта можно сказать, что каждая отдельная новость будет выделена тегом article, т.к., если изолировать ее со страницы, она не потеряет смысл, но все новости вместе будут обрамлены тегом section, т.к. это отдельный большой блок с общей темой, и он не может быть изолирован. Согласитесь, если мы оставим на странице просто блок с новостями, он будет «не к месту», а если оставим одну конкретную новость, то все будет вполне логично.
Конечно, все зависит от конкретной ситуации, но чаще всего вы можете разметить свою страницу правильно, используя следующее правило: если контент семантически связан между собой и может быть изолирован со страницы без потери смысла, то используйте article. Если не может быть изолирован со страницы без потери смысла, используйте section. В остальных случаях – div.
Итак, на этом все. Надеюсь, что данная тема вам ясна и теперь вы будете размечать ваши интернет-странички грамотно. Спасибо за внимание и удачи!
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 5 ):
Ни чего не понятно. Михаил, покажи полный пример. Одна или две строчки мне не о чём не говорят. Тут как минимум 2 примера нужно с article и section.
Здесь все более чем понятно. Перечитайте статью снова. На ваш вопрос есть ответ в разделе Article, в самом начале. Нужен пример? Держите! Отдельная статья на сайте(новость или еще что-нибудь) будет в теге article, но все статьи(новости и т.д.) ВМЕСТЕ будут обрамлены тегом section
Вот такой пример я здесь вижу. И Вам Александр, нужно было именно так и написать пример, то есть показать код в качестве примера.
Тема не такая уж и простая,сложно сразу все правильно сделать.Кстати, вот тут есть вы сможете найти решение.если что-то не так сделали http://sitepark.ua/osnovnye-oshibki-pri-sozdanii-saytov
Крутая статья, спасибо за полезный материал!
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
div, section, article — где использовать каждый тег
С приходом спецификации HTML5 мы обзавелись набором новых тегов типа div, section, article итд. Не смотря что с выхода HTML5 прошёл уже почти десяток лет, ученики не перестают меня спрашивать, для чего необходим тот или инной тег. Простым ответом на этот вопрос будет — для построения семантических макетов. Но давайте разберёмся в деталях.
Назначение элементов
Это общий элемент, служит для группировки любого типа контента. По умолчанию имеет блочное отображение. Никак дополнительно не связывет обёрнутный в него контент, что может привести к неприятным сюрпризам, при использовании экранных читалок. Официальная документация на W3C говорит о том, что элемент
Элемент section подразумевает более конкретное применение. Секция объединяет контент семантически связанный между собой, например блок новостей, преимуществ или услуг на вашем лендинге. Поскольку секция имеет логику формирования контента на странице, обязательно необходимо проставить заголовок прямо в начале секции.
Тег article предполагает ещё более конкретное применение по сравнению в секцией. Article используется в контексте сильной семантической связи контента, в нём так же как и в секции обязательно указывать заголовок. При этом контент как не трудно догадатся из названия относится к содержимому статьи / страницы, должен быть независим от прочего оформления сайта и не терять смысла, если его показать в отрыве от всего сайта, так как именно подобным образом его используют экранные ассистенты и режим «для чтения» в браузерах.
div, section или article
Итак когда какой элемент правильно использовать?
Комбинирование тегов
Теги могут представлять собой комбинации, например если на нашем лендинге или главной странице, есть блок новостей, логично будет обернуть его в section, а тизеры статей в article
Кроме того, элемент article может содержать секции для объединения в себе связанной информации, а ещё можно вложить article самого в себя, когда мы хотим процитировать большую выдержку из других статей, или вложить рекомендуеммые / связанные статьи со ссылками. Не забывайте, что для цитирования кототких текстов грамотнее будет использовать тег blockquote.
Верстайте контент грамотно и Google полюбит ваши сайты =)
Структура HTML5 — div, section и article :: Хранитель заметок
Структура HTML5 — div, section и article
В формате разметки HTML5 появились новые элементы, которые служат заменой для обычных блочных элементов с атрибутами class и id, например
Рассмотрим три элемента, которые легко можно спутать друг с другом:
Разница между div, section и article
В HTML4 div использовался как базовый элемент разметки. Он не имел особого семантического значения. Так же не было особых требований на его содержимое и взаимоотношение между ним внутри блока.
Элемент section
Так же этот элемент служит для разбивки текста на разделы.
Элемент article
Что выбрать?
Если проводить аналогию с HTML4, то можно сравнить эти теги с p и blockquote. Оба тега — блочные элементы, но blockquote, как разновидность p, имеет значение «блок цитируемого текста». То же самое и с section и article: тег section обозначает близкий по смыслу текст, а тег article обозначает осмысленную часть этого текста.
Смущающим обстоятельством является то, что section может быть использована для различных частей страницы (главная колонка, раздел новостей и т.п. на одной странице) и содержать article, а так же для дробления большого article (т.е. использоваться внутри article).
Чтобы определиться, какой из элементов выбрать, можно использовать алгоритм:
Итак, элемент section не стоит использовать если:
Элементы section и article используются аналогично div в HTML4. Они не должны встречаться внутри p, blockquote или address.
В чем разница между и
В чем разница между и
означает, что содержимое внутри сгруппировано (т. е. относится к одной теме) и должно отображаться в виде записи в схеме страницы.
Так что нет: использование
Элемент представляет общий раздел документа или приложения. Раздел, в этом контексте, является тематической группировкой контента. Каждый из них section должен быть идентифицирован, как правило, путем включения заголовка (элемент h1-h6) в качестве дочернего элемента.
Примерами разделов могут быть главы, различные страницы с вкладками в диалоговом окне с вкладками или пронумерованные разделы диссертации. Домашняя страница веб-сайта может быть разбита на разделы для введения, новостей и контактной информации.
Элемент не является универсальным элементом контейнера. Когда элемент нужен только для стилизации или для удобства написания сценариев, авторам рекомендуется использовать этот
элемент. Общее правило заключается в том, что элемент подходит только в том случае, если содержимое элемента будет явно указано в схеме документа.
Примечание. Авторам настоятельно рекомендуется рассматривать этот
элемента приводит к лучшей доступности для читателей и облегчает поддержку для авторов.
This is a paragraph
This is a second-level heading
Раунд 1
: Элемент HTML Section ( ) представляет общий раздел документа, т. Е. Тематическую группировку контента, обычно с заголовком.
Раунд 2
: Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент. 
В этом смысле div релевантен только с точки зрения чистого CSS или DOM, тогда как раздел релевантен также для семантики и, в ближайшем будущем, для индексации поисковыми системами.
Если раздел содержит другой раздел, заголовок h1 во внутреннем разделе отображается более мелким шрифтом, чем заголовок h1 во внешнем разделе. При использовании div вместо секции внутренний заголовок div h1 отображается как h1.
При использовании css для окраски заголовка h1, внутренний h1 также был окрашен (ведет себя как обычный h1). Такое же поведение в Firefox 18, IE 10 и Chrome 28.
В стандарте HTML5 элемент определяется как блок связанных элементов.
Что такое семантическая вёрстка и зачем она нужна
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.
Семантическая вёрстка — подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Почему семантика важна
Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Классический пример — расписание поезда «Сапсан» в выдаче Google.
Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.
Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа
Ну и представьте, насколько проще читать вместо
Основные семантические теги HTML
Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег
, который обозначает параграф. При этом теги или не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.
Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.
Как разметить страницу с точки зрения семантики
Процесс разметки можно разделить на несколько шагов с разной степенью детализации.
Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.
Создание семантической разметки по макету
Навык, без которого фронтенд-разработчикам ну просто никуда.
Сомневаюсь, какие теги использовать
Есть простые правила для выбора нужных тегов.
Как точно не нужно делать
Не используйте семантические теги для украшательств. Для этого есть CSS.
Может показаться, что некоторые теги подходят для того, чтобы сделать страницу покрасивее, подвигать текст или добавить ему интервалов. Но то, что браузер по умолчанию отображает теги как-то, как вам нужно, не значит, что это нужно использовать. Посмотрим на пример.
Здесь сразу несколько ошибок:
использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.
А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.
Поэтому используйте семантические теги по назначению.