Забудьте про div, семантика спасёт интернет
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном
Семантическая вёрстка — подход к разметке, который опирается не на внешний вид сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух. Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте. Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче. Классический пример — расписание поезда «Сапсан» в выдаче Google. Разработчики tutu.ru сверстали таблицу тегом Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа Ну и представьте, насколько проще читать Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов. Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее. Особенности: желателен заголовок внутри. Типовые ошибки: путают с тегами Значение: смысловой раздел документа. Неотделяемый, в отличие от Особенности: желателен заголовок внутри. Типовые ошибки: путают с тегами Значение: побочный, косвенный для страницы контент. Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице. Типовые ошибки: считать Значение: навигационный раздел со ссылками на другие страницы или другие части страниц. Особенности: используется для основной навигации, а не для всех групп ссылок. Основной является навигация или нет — на усмотрение верстальщика. Например, меню в подвале сайта можно не оборачивать в Типовые ошибки: многие считают, что в Значение: вводная часть смыслового раздела или всего сайта, обычно содержит подсказки и навигацию. Чаще всего повторяется на всех страницах сайта. Особенности: этих элементов может быть несколько на странице. Типовые ошибки: использовать только как шапку сайта. Значение: основное, не повторяющееся на других страницах, содержание страницы. Особенности: должен быть один на странице, исходя из определения. Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее). Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта. Особенности: этих элементов может быть несколько на странице. Тег Типовые ошибки: использовать только как подвал сайта. Процесс разметки можно разделить на несколько шагов с разной степенью детализации. Крупные смысловые блоки на каждой странице сайта. Теги: Крупные смысловые разделы в блоках. Теги: Заголовок всего документа и заголовки смысловых разделов. Теги: Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы. Есть простые правила для выбора нужных тегов. Получилось найти самый подходящий смысловой тег — использовать его. Для потоковых контейнеров — Для мелких фразовых элементов (слово или фраза) — Правило для определения Можете дать имя разделу и вынести этот раздел на другой сайт? — Можете дать имя разделу, но вынести на другой сайт не можете? — Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? — Не используйте семантические теги для украшательств. Для этого есть CSS. Может показаться, что некоторые теги подходят для того, чтобы сделать страницу покрасивее, подвигать текст или добавить ему интервалов. Но то, что браузер по умолчанию отображает теги как-то, как вам нужно, не значит, что это нужно использовать. Посмотрим на пример. Здесь сразу несколько ошибок: Тег Тег Тег А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS. Поэтому используйте семантические теги по назначению. Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и курсах HTML Academy. Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса «Профессиональная вёрстка сайтов». А с промокодом SKUCHNO цена станет ещё приятнее. В конце концов, один раз живём.Почему семантика важна
вместо
. В спецификации для каждого семантического элемента описана его роль. вместо . Или вот такой код. Смотрите и сразу понятно, что тут и зачем.
Основные семантические теги HTML
, который обозначает параграф. При этом теги или не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид. и и тегом для «боковой панели» и размечать этим тегом основной контент, который связан с окружающими его элементами.. В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) — это не является основной навигацией, семантически для такой информации предназначен сам по себе. может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме. не обязан находиться в конце раздела.Как разметить страницу с точки зрения семантики
.-
Сомневаюсь, какие теги использовать
.Как точно не нужно делать
должен использоваться для выделения в тексте цитат, а не просто случайного выделения текста. Так совпало, что в браузерах этот блок по умолчанию выделен, но это не значит, что нужно его использовать таким образом. и ничего больше. использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.
