Какой тег используют для разметки раздела страницы

HTML: виды тегов

HTML – это декларативный язык, он используется для объявления структуры документа и не имеет алгоритмической составляющей.

В веб-разработке HTML применяется для создания разметки документа, которая потом стилизуется для отображения в браузере. Таким образом, если вам нужно сверстать элемент, то сначала для него пишется HTML-код (определяется структура этого элемента), затем с помощью стилей CSS оформляется внешний вид этого элемента и его расположение на странице. После этого с помощью языка JavaScript элементу может быть задана определенная функциональность, он становится интерактивным.

Теги в языке HTML

Основной и единственный структурный элемент языка HTML – это тег. Разберем их основные виды.

Формат тегов HTML:

Например:

Такие теги называются парными, так как для них указаны маркеры начала и конца тега.

У тега могут быть атрибуты, которые указываются в его открывающей части и отделяются друг от друга пробелами.

Например:

Также существуют одиночные теги, для которых закрывающая часть отдельно не указывается.

Например:

Отметим ещё одну особенность HTML – язык HTML является регистронезависимым, имена тегов и атрибутов можно записывать как в нижнем, так и в верхнем регистре.

Виды тегов

Теги языка HTML можно условно разделить на несколько категорий:

1. Теги для форматирования текста и указания ссылок

• h1, h2, h3, h4, h5, h6 – теги заголовков;
• b, em – теги для изменения начертания текста;
• ul, ol – теги для создания списков;
• a – тег для создания ссылок.

2. Теги структуры документа

• nav – тег для создания навигации по сайту;
• aside – создаёт боковую панель на сайте, где размещается неосновной контент;
• header – тег для создания шапки сайта или раздела;
• section – тег для создания раздела веб-страницы;
• div – тег, с помощью которого выделяется отдельный блок, с целью его последующего изменения;
• span – определяет строчные элементы.

3. Функциональные теги

• html – включает в себя всё содержимое страницы;
• body – раздел html-файла, где содержится техническая инфомрация;
• script – предназначен для создания/подключения скриптов;
• link – предназначен для подключения внешних файлов (шрифтов или стилей);
• meta – содержит информацию, предназанченную для поисковых систем и браузеров.

4. Теги встраиваемого контента

• img – изображение;
• audio – аудиуоконтент;
• iframe – отдельная область документа, в которую можно подгружать другие независимые документы.

5. Теги форм (для взаимодействия с пользователем)

• form, input – теги для создания формы.

6. Теги таблиц

• table, td, tr – теги для создания таблицы.

Что такое семантическая вёрстка и зачем она нужна

Давным-давно почти все делали сайты и не переживали о том, что у них внутри. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном и ) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

Семантическая вёрстка — подход к разметке, который опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.

Почему семантика важна

Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.

Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает б_о_льшему количеству пользователей работать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.

Чтобы сайт был выше в поисковиках. Поисковики не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.

Классический пример — расписание поезда «Сапсан» в выдаче Google.

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо и span . В спецификации для каждого семантического элемента описана его роль.

Ну и представьте, насколько проще читать вместо . Или вот такой код. Смотрите, и сразу понятно, что тут и зачем.

Основные семантические теги HTML

Но в актуальной версии HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

• Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
• Особенности: желателен заголовок внутри.
• Типовые ошибки: путают с тегами и .

• Значение: смысловой раздел документа. Неотделяемый, в отличие от .
• Особенности: желателен заголовок внутри.
• Типовые ошибки: путают с тегами и .

• Значение: побочный, косвенный для страницы контент.
• Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.
• Типовые ошибки: считать тегом для «боковой панели» и размечать этим тегом основной контент, который связан с окружающими его элементами.

• Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.
• Особенности: используется для основной навигации, а не для всех групп ссылок. Основной является навигация или нет — на усмотрение верстальщика. Например, меню в подвале сайта можно не оборачивать в . В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) — это не является основной навигацией, семантически для такой информации предназначен сам по себе.
• Типовые ошибки: многие считают, что в может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме.

• Значение: вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию. Чаще всего повторяется на всех страницах сайта.
• Особенности: этих элементов может быть несколько на странице.
• Типовые ошибки: использовать только как шапку сайта.

• Значение: основное, не повторяющееся на других страницах, содержание страницы.
• Особенности: должен быть один на странице, исходя из определения.
• Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).

• Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.
• Особенности: этих элементов может быть несколько на странице. Тег не обязан находиться в конце раздела.
• Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

1. Крупные смысловые блоки на каждой странице сайта. Теги: , , .
2. Крупные смысловые разделы в блоках. Теги: , , , .
3. Заголовок всего документа и заголовки смысловых разделов. Теги: — .
4. Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
5. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

• Получилось найти самый подходящий смысловой тег — использовать его.
• Для потоковых контейнеров — .
• Для мелких фразовых элементов (слово или фраза) — .

1. Можете дать имя разделу и вынести этот раздел на другой сайт? —
2. Можете дать имя разделу, но вынести на другой сайт не можете? —
3. Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? —

Как точно не нужно делать

Не используйте семантические теги для красоты. Для этого есть CSS.

Может показаться, что некоторые теги подходят для того, чтобы сделать страницу покрасивее, подвигать текст или добавить ему интервалов. Но то, что браузер по умолчанию отображает теги как-то, как вам нужно, не значит, что это нужно использовать. Посмотрим на пример.

Здесь сразу несколько ошибок:

1. Тег должен использоваться для выделения в тексте цитат, а не просто случайного выделения текста. Так совпало, что в браузерах этот блок по умолчанию выделен, но это не значит, что нужно его использовать таким образом.
2. Тег тоже использован для визуального «сдвига» текста. Это неверно, потому что этот тег должен быть использован только для обозначения списков, а во-вторых, в тег
   можно вкладывать только теги и ничего больше.
3. Тег

   использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

Материалы по теме

• Что такое флексы
• Что такое гриды
• Как создать адаптивную сетку
• CSS-селекторы. Шпаргалка для новичков
• Как ускорить вёрстку. Обзор препроцессоров

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Структура 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).

Чтобы определиться, какой из элементов выбрать, можно использовать алгоритм:

1. Будет ли содержимое иметь осмысленное значение само по себе, например, при публикации в RSS-потоке? Если да, то выбираем article
2. Если части содержимого объединены общим значением, то выбираем section
3. Наконец, если нет никакого семантического значения, то выбираем div

Элемент section , за редким исключением, не должен использоваться, если у него нет заголовка. Если при автоматическом построении содержания документа будут встречаться не именованные разделы, то, вероятно, разметка сделана не верно. Однако наличие не именованных элементов nav и aside может быть вполне типичным явлением.

Итак, элемент section не стоит использовать если:

1. требуется блочный элемент для декорирования. Это функция элемента div
2. в этом месте для разметки содержимого больше по смыслу подходят элементы article, aside или nav
3. у раздела нет естественного заголовка

Элементы 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">↩↩