Семантическая верстка что это

Семантический HTML — Основы современной верстки

При создании верстки нужно учитывать семантику, то есть смысловое (логическое) значение элементов.

Основная цель любой HTML-верстки — передача смысла блоков. Часто помимо пользователей по нашим страницам ходят и роботы. Они собирают и анализируют информацию страницы. К примеру, поисковые роботы просматривают всю страницу и определяют ее полезность, а также уникальность. И если для человека достаточно просто поделить страницу на части и найти шапку, основной контент, футер, то для робота это достаточно сложная задача. Робот видит исключительно нашу верстку и не может «глазами» отделить части макета.

Вторая важная причина необходимости создания семантической верстки — использование страниц людьми с ограниченными возможностями. Слабовидящие пользователи используют «скринридеры» — устройства или приложения, воспроизводящие голосом элементы страницы. Чтобы скринридер мог правильно понять, где содержится основная информация, меню, поясняющие блоки и так далее, мы должны правильно разметить страницу. Это поможет устройствам правильно разбить страницу на логические блоки и дать возможность посетителям корректно перемещаться по странице. Такая концепция называется «Доступный WEB».

Для решения этих вопросов в стандарте HTML5 появилось множество семантических тегов, которыми вы можете пользоваться. В этом уроке изучим базовые семантические теги и разметим целую HTML-страницу.

Шапка сайта

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

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

Один из примеров шапки сайта:

src="/logo.png"alt="Логотип">id="menu">
  
href="/">Главная 
  
href="/about">О нас 
  
href="/contacts">Контакты 

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

Навигация

Попробуйте взглянуть на шапку сайта из примера выше глазами компьютера. Что он там видит?

• Картинку
• Блочный элемент
• Маркированный список
• Набор ссылок

Если вы еще не сверстали пару своих макетов, то по такому набору можете и не понять, что набор ссылок не что иное, как основное меню сайта. Вот и роботам не всегда просто это сделать. Конечно, они уже достаточно обучены, чтобы в таком простом наборе найти меню, но меню обычно может быть не одно и быть контекстно-зависимым. Тогда робот может принять за основное меню не то, что бы мы хотели.

Как же нам ему помочь? Для этого в стандарте HTML5 появился тег . Он обозначает навигационную область. Причем помочь отделить основное меню от меню раздела можно с помощью других тегов, речь о которых пойдет ниже.

Заменим простой блочный элемент на его семантичного брата :

src="/logo.png"alt="Логотип">id="menu">
  
href="/">Главная 
  
href="/about">О нас 
  
href="/contacts">Контакты 

Главной особенностью использования является то, что не обязательно оборачивать все меню на странице. Обычно достаточно обернуть только главное меню и, например, не оборачивать меню в футере. При этом не запрещается иметь сразу несколько элементов на странице. Выделяйте ими главные меню на странице.

Уникальный контент

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

Для разметки уникального контента в стандарте HTML5 появился специальный тег . Именно он поможет обозначить область с самым важным контентом на странице. Старайтесь в нем держать только контент. Обычно меню, боковые панели и футер в эту область не входят. Исключением может быть только ситуация, если эти блоки действительно уникальны для данной страницы. Например, меню может вести по разделам страницы. В таком случае оно на полных правах может быть включено в область уникального контента.

Добавим такую область в нашу верстку:

src="/logo.png"alt="Логотип">id="menu">
  
href="/">Главная 
  
href="/about">О нас 
  
href="/contacts">Контакты Хекслет — практические курсы по программированиюМы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.

Наличие тега также очень важно для мобильных браузеров. Вы могли видеть, что многие из них имеют функцию «Режим чтения». При его включении браузер автоматически удалит все оформление и все ненужные блоки, оставив только главный контент. Этим контентом и будет являться область, заключенная в тег . Такой режим отлично подходит для людей, у которых в настоящий момент слабое подключение к интернету.

Так как внутри содержится уникальный контент страницы, то разрешено использовать только один такой тег на странице.

Секции

Контент на странице не является однородным. Обычно это цепочка логических областей, каждая из которых описывает что-то конкретное. Например, на странице могут присутствовать область с описанием преимуществ, цены, формы и так далее. Их хочется как-то выделить. И на это есть несколько причин:

• С правильно разделенным контентом удобно работать. Мы легко можем перемещать такие области, менять местами или удалять. В коде их будет легко найти
• Правильная группировка разделов — важная часть при создании доступного web’а

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

src="/logo.png"alt="Логотип">id="menu">
  
href="/">Главная 
  
href="/about">О нас 
  
href="/contacts">Контакты Хекслет — практические курсы по программированиюМы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.ПреимуществаМного теорииМного практикиМного менторов

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

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

Независимые секции

Другим способом выделить логический участок текста является использование тега . У вас может возникнуть вопрос: «Зачем иметь два различных тега для выделения одного и того же?»

Между и есть одна существенная разница: является независимой секцией, то есть ее можно перенести на любую страницу сайта или даже на другой сайт, и при этом она не потеряет своего контекста.

Представьте себе блог и отдельную статью в нем. Можем ли мы понять статью, если она вдруг окажется не в блоге, а, например, на странице с услугами? Конечно! Ведь статья — это законченный текст. Следовательно, такую статью можно обернуть в тег .

Добавим колонку новостей в наш пример верстки. Сразу подумаем, как она может быть разделена. Сами по себе новости являются достаточно уникальным элементом, ведь даже если их перенести на другую страницу, то они не потеряют свою актуальность. В этом случае каждую новость можно обернуть в . А что делать с оберткой блока? Она объединяет по смыслу несколько различных новостей, ее можно спокойно назвать одним словом, и она точно будет иметь свой заголовок. Следовательно, ей подойдет тег .

src="/logo.png"alt="Логотип">id="menu">
  
href="/">Главная 
  
href="/about">О нас 
  
href="/contacts">Контакты Хекслет — практические курсы по программированиюМы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.ПреимуществаМного теорииМного практикиМного менторовНовостиНовость 1Текст новости 1href="#">ПодробнееНовость 2Текст новости 2href="#">ПодробнееНовость 3Текст новости 3href="#">Подробнее

Дополняющие секции

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

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

Давайте добавим такую информацию в нашу верстку. Внутри этой дополнительной секции будет находиться еще одно меню, которое не будем оборачивать в , так как оно не является основным.

src="/logo.png"alt="Логотип">id="menu">
  
href="/">Главная 
  
href="/about">О нас 
  
href="/contacts">Контакты href="#">Необязательный пункт 1href="#">Необязательный пункт 2href="#">Необязательный пункт 3Хекслет — практические курсы по программированиюМы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком, это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.ПреимуществаМного теорииМного практикиМного менторовНовостиНовость 1Текст новости 1href="#">ПодробнееНовость 2Текст новости 2href="#">ПодробнееНовость 3Текст новости 3href="#">Подробнее

Самостоятельная работа

Создайте файл index.html на своем компьютере и создайте собственное резюме. Используйте изученные в этом уроке теги.

Семантика в HTML: почему важно знать, понимать и применять на практике

Почему семантика важна? Зачем подбирать правильные теги для контента? Зачем вообще это все, если можно слепить все с использованием тега div? Ответы на эти и другие вопросы вы найдете ниже.

Краткая история появления HTML5

HTML появился в далеком 1991 году, когда великий отец интернета сэр Тим Бёрнерс Ли показал миру его первую версию. В данном документе содержалось всего 20 тегов для описания страницы. На тот момент времени их было достаточно, но, если смотреть с точки зрения современного мира, это критически мало.

Спустя некоторое время на свет появляется W3C — консорциум всемирной паутины, и он выпускает вторую версию. Также они издают спецификацию, которая описывает в мельчайших подробностях весь HTML.

Далее идет итерация новых версий: в 1997 году — HTML 3.2, чуть позже появляется HTML4, а в 1999 году маленькая модификация HTML4.01.

Наконец в 2000 году человечество видит рождение XHTML, который по задумке должен был выкинуть все теги, а также привести разработчиков к строгости синтаксиса. Спустя время стало понятно, что XHTML только наносит вред, так как возникали проблемы с совместимостью HTML и XHTML, плюс сообщество стало выражать свое недовольство в сторону политики развития языка разметки.

HTML5 возник, когда крупные компании и влиятельные деятели индустрии перестали терпеть текущую ситуацию, создав свою организацию WHATWG. Выход пятой версии датируется 2006 годом.

W3C по итогу отказался от своего, немного странного, XHTML. Пользователи, разработчики и все причастные к интернету не поддержали их идею, они ждали выход новой версии HTML. Отказ случился в 2009 году, а что еще более интересно, W3C стал совместно с WHATWG развивать HTML5.

На сегодняшний день самая актуальная спецификация — это живой стандарт HTML от WHATWG.

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

Давайте для начала определимся с понятием семантики, а затем соотнесем его с темой статьи.

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

На картинке выше перечислено некоторое количество тегов. На данный момент их более 100 штук. Какие-то полностью утверждены спецификацией, и браузеры могут их распознать и «отрендерить», т.е. отобразить на странице. Некоторые являются устаревшими и не рекомендуются к использованию.

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

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

1. Доступность
2. Поисковые роботы
3. Спецификация

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

и его элементы
, то в таком случае читалка сообщит примерно следующее: «навигация => список из 5 элементов => О компании ссылка».

Если построить меню с использованием данных тегов, то люди, имеющие проблемы со зрением, будут вам благодарны. Они получат полную, удобную для них информацию и смогут пользоваться сайтом в полной мере.

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

К примеру, существуют поисковые роботы, которые ежедневно «парсят» или, по-простому, просматривают миллионы сайтов в интернете. Они считывают код, получают сведения, передают данные на поисковые сервера и т.п. В конце концов сайт ранжируется в поисковой выдаче.

Такие теги, как header, footer, aside, main, section, article, задают основную структуру страницы. Используя их, вы показываете роботу, где у вас шапка сайта, где подвал, а где основной контент страницы. Робот поймет сайт быстрее, поставит плюсик и пойдет дальше.

Есть очень хороший пример правильного, семантичного использования тегов при построении страницы. Посмотрите на изображение ниже.

Разработчики сайта РЖД сконструировали расписание с помощью тега table, вместо использования div. Тем самым робот google считал информацию, и их сниппет появился в выдаче по важному коммерческому запросу.

Семантика каждого тега четко прописана в стандартах. Каждый тег имеет свое описание и четкую роль. На данный момент есть еще разработчики, которые по старой привычке используют универсальный блочный тег div (о нем мы еще поговорим).

К примеру, выше на изображении показана вырезка из спецификации по тегу nav. Здесь описаны его категория, контентная модель, контекстная модель, атрибуты и прочие вещи. Сразу же после описывается смысл тега и какие-либо расширяющие комментарии.

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

Есть отличный доклад одного популярного в узких кругах разработчика «Семантика для циников». Всем тем, кто причастен к разработке сайтов, горячо рекомендую посмотреть.

Больше статей на схожую тематику:

• Лендинг для B2B и B2C: 7 глобальных отличий, которые важно учесть при разработке
• 10 эвристик юзабилити от Якоба Нильсена
• 6 способов определить шрифт на картинке

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

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

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

Данный тег используется для группировки вводной части смыслового раздела или всего сайта. Как правило, содержит в себе навигацию, телефоны, почту, строку поиска, логотип и пр. Таким образом чаще всего данный тег используют как шапку сайта.

Кстати, в нашем блоге мы рассказывали, как создать шапку сайта — рекомендуем ознакомиться. Ниже вы можете увидеть типичное применение данного тега.

Есть некоторая особенность у тега header, которую большинство разработчиков упускают из виду при его применении. В спецификации не зря написано, что данный тег служит вводной частью смыслового раздела. То есть его смело можно использовать как шапку какого-то блока, а не всего сайта, как все привыкли делать. К сожалению, такое редко встретишь на просторах интернета.

Этот тег используется для создания навигации на сайте. Его следует использовать для основной навигации на сайте, а не только для каких-то групп ссылок. Ниже представлен один из вариантов меню.

Например, в подвале сайта, как правило, дублируются ссылки на внутренние страницы — их тоже можно объединить в навигацию, однако все остается на усмотрение верстальщика. Спецификация не будет считать это ошибкой.

Интересным применением тега nav будет ситуация при построении пагинации.

Ведь если задуматься, то что такое пагинация? Это ссылки на страницы. Если это ссылки, то почему бы в данном случае не использовать тег .

Main отвечает за основное, главное, доминирующее и неповторяющиеся на других страницах содержимое. Важно, чтобы на странице данный тег не повторялся и использовался только единожды. Исключение одно — если не указан специальный атрибут, который отвечает за скрытие элемента.

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

«Футер» необязательно использовать только как подвал сайта. Повторять его можно сколько угодно раз, главное, чтобы он использовался как окончание какого-то смыслового блока на странице.

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

Внутри данного тега очень желательно использовать заголовок соответствующего уровня, и тогда блок станет независимым и целостным на все 100%. Иногда возникает дилемма, какой же тег выбрать для блока — section или article? По смыслу они очень похожи, но если копнуть чуть глубже, то сразу станет понятно. Об этом читайте ниже.

Данный элемент представляет собой смысловой и логический раздел страницы. Зачастую используется в виде тематической группы контента с заголовком.

Теперь понимаете, в чем отличие между article и section? Один элемент самостоятельный и независимый, другой четко и логически привязан к определенной странице.

Нравится статья? Тогда смотрите наши курсы!

• Мини-курс «Создаем сайт, который будет продавать 24/7»
• Курс «Сайт на Тильде с нуля»
• Мини-курс «Дизайн и юзабилити»

Представляет собой раздел страницы, который косвенно или побочно связан с основным контентом. Информацию, размещенную в нем, можно рассматривать как самостоятельный, так и отдельный вид контента. Как правило, такие разделы представлены в виде боковых панелей на сайте.

Главное — не стоит забывать, что тег aside не должен быть только сайдбаром в правой или левой части страницы.

На примере ниже очень удачно расположили ссылки на социальные сети в aside. Они как раз являются косвенным контентом по отношению к главной информации сайта.

Очень интересная группа тегов, представляющая собой список описаний или список ассоциаций, который состоит из нуля или более групп пары «имя — значение».

• (сокращение от «description list») обозначает сам список описаний;
• (сокращение от «description term») обозначает термин;
• (сокращение от «description definition») обозначает описание или определение.

Использование данных тегов редко можно встретить. Возможно, это связано с тем, что многие не понимают их смысла и не умеют их правильно использовать.

Google нашел этим тегам очень интересное применение на одной своей странице.

Разработчики взяли меню в подвале страницы, во-первых, обернули его в тег , во-вторых, группу ссылок обернули в dl, его заголовок поместили в dt, и ссылку в dd. Проще это увидеть, чем описать.

Возможно, у вас возник вопрос о правильности и целесообразности использования данных тегов в текущем месте, но, кажется, разработчики google знают, что делают.

Однако все же есть очень спорный момент. Они сделали по такому же принципу блок с ссылками на подписку в соц. сетях.

Весьма неоднозначное решение и оформление блока с такого рода информацией. Оставим вопрос правильности применения открытым.

Закончим наше описание самым популярным и простым тегом. Он не имеет какого особого значения. Это просто тег с помощью которого можно построить блок на сайте или страницу. или весь сайт.

В теории с помощью div можно сделать все что угодно. Забудьте все то, что было написано выше! Ведь можно использовать div и клепать сайты одним за одним. Если ты знаешь, как использовать div, то ты, получается, верстальщик и можешь идти на свое первое собеседование! Шутка, конечно, лучше использовать правильные и подходящие для этого теги.

Это далеко не все теги, которые существуют в html, мы описали лишь некоторые из них. Можно еще часами разговаривать о их семантике, как их правильно использовать, находить лучшие практики.

Примеры роста кликов, конверсий, заказов и прибыли:

• Комплексный дизайн сайта с нуля для косметологической клиники
• Продающая страница для компании по продаже коммерческого транспорта
• Интернет-магазин с Индивидуальным дизайном

Вывод

Семантика очень важна при верстке страниц сайта. Как минимум её не просто так придумали и занесли в спецификацию.

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

А если вам нужен семантичный сайт, где теги используются по назначению, где к верстке подошли с особой скрупулёзностью, то можете смело обращаться к нам. Мы поможем вам в этом нелегком деле. 🙂

103

2

2

1

2

Спасибо за реакцию, она бесценна! Обязательно подпишитесь на наш Telegram-канал, публикуем много интересных и актуальных материалов. Не пользуетесь Telegram, тогда познакомьтесь с Катей и подпишитесь на нашу рассылку. ×

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

семантическая верстка и таблицы стилей позволяют делать качественные сайты

Споры о достоинствах и недостатках семантической верстки продолжаются, хотя аргументы в пользу такой верстки перевешивают все имеющиеся недостатки. Вначале следует определить, что же это такое. Семантика языка разметки веб-страниц — это смысловое описание элементов этого языка. Есть, например, элементы описывающие заголовки, списки или таблицы. Если элементы используются именно так, как было предусмотрено при создании данного языка, значит, имеет место семантическая верстка. Если же, например, элемент, предназначенный для описания таблицы, используется исключительно для оформления, как это часто встречается, то верстка не семантическая.

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

Семантическая верстка неотделима от концепции разделения данных и представления, согласно которой в коде страницы хранится информация и ее структура, а внешний вид описывается в таблице стилей. Это позволяет легко менять стиль сайтов, как на странице настройки нашего сайта, а также разрабатывать отдельные стили для различных устройств, таких, как, например, монитор или принтер. Семантическая верстка облегчает оформление единообразных фрагментов, так как точно известно, какие фрагменты в коде являются заголовками, а какие — списками. Остается только описать нужные стили в соответствующем файле. Для изменения оформления не надо менять все веб-страницы, достаточно изменить стиль.

Нередко материалы для сайта подготавливаются в текстовом редакторе Word. Для переноса их на сайт, сверстанный семантически правильно, можно воспользоваться стандартными средствами, преобразующими элементы документа Word в соответствующие элементы языка разметки. Если же используется необычная верстка, копирование из Word с сохранением форматирования представляет определенную проблему.

Недостаток у семантической верстки только один — она требует больших усилий, чем, например¸ табличная верстка. То есть для того, чтобы сделать сайт кое-как, но приложив меньше усилий, подойдет табличная верстка. Для создания качественного сайта следует использовать семантическую верстку.