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

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

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

История появления HTML5

Первая версия HTML появилась в 1991 году, она содержала всего два десятка тегов для разметки страницы. Сегодня этого критически мало, но на тот момент их было вполне достаточно для работы. В то время многие даже считали, что у HTML в принципе нет будущего. Например, организация W3C делала упор на развитие «улучшенного наследника» HTML — XHTML. Как оказалось позднее, XHTML не суждено было стать заменой HTML в полной мере. Один за другим выходили версии HTML2, HTML3.2, HTML4, а в 2014 году был окончательно внедрен HTML5, который и остается стандартом веба по сей день.

Одно из главных отличий HTML5 от HTML4 — гораздо более строгий синтаксис. Если в четвертой версии достаточно было создать структуру документа, то в пятой стало необходимо и соблюдение логики верстки. Времена, когда сайты верстали двумя десятками тегов, остались в далеком прошлом. Пришло время семантической верстки!

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

Соблюдение правил семантики при верстке страниц решает сразу несколько важных задач.

1. Повышает релевантность сайта с точки зрения поисковых алгоритмов

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

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

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

2. Делает сайт доступным для незрячих людей

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

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

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

Зная, что значит семантическая верстка, гораздо проще понять ее актуальность и рациональность использования. Но нередко между тегами возникает путаница, начинающий верстальщик не до конца понимает, какой тег нужно применять в конкретном случае. К примеру, если с h1 и p (заголовок и параграф) все очевидно, то с тегами article и section сложнее: во многих аспектах они похожи, но в то же время сильно отличаются.

Чтобы немного упростить вам задачу, рассмотрим распространенные HTML-теги, без которых кроссбраузерная семантическая верстка сегодня невозможна.

Тег article

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

В этом, собственно, состоит главное отличие article от section, о котором мы расскажем далее.

Тег section

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

Пример использования тега section — для отдельных смысловых блоков под общим заголовком.

Тег aside

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

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

Тег nav

Используется для создания навигации на странице. Внутри тега могут находиться теги ul, li и другие. Они служат пунктами навигации. На странице допускается несколько блоков с тегом nav, но использовать большое их количество обычно не требуется.

Тег header

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

Тег main

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

Тег footer

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

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

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

1. Расстановка крупных смысловых блоков с использованием тегов header, main, footer.
2. Размещение смысловых разделов внутри отдельных блоков с применением nav, section, article, aside.
3. Выделение заголовков разных уровней с помощью тегов h1 – h6.
4. Расстановка мелких элементов: списков, таблиц, параграфов, форм, цитат и тому подобного (p, ul, li, blockquote и т. д.).
5. Размещение фразовых элементов: изображений, ссылок, кнопок, видео, прочего (img, video, a и других).

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

Как не нужно делать — основные ошибки

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

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

Мы здесь видим следующие ошибки:

1. Использование тега blockquote не по назначению. Он применяется исключительно для выделения цитат, а не любого рандомного текста. Поэтому использовать его просто для выделения какого-то фрагмента на странице не стоит.
2. Применение тега ul для сдвига текста. Опять же, текст действительно сдвинулся, но это сделано неправильно. Для его смещения нужно использовать CSS. К тому же в ul должны содержаться теги li, которых здесь нет.
3. Применение тега p и “&nbsp” в нем для увеличения интервала. Тег p предназначен исключительно для выделения параграфов, и в данном случае он неуместен.

А теперь посмотрите, как выглядит правильная HTML семантическая верстка.

В этом случае все теги использованы корректно. А дальнейшая стилизация элементов будет осуществляться в CSS.

Обратите внимание! Корректное отображение страницы в браузере еще не означает, что верстка выполнена правильно и без ошибок. У двух визуально идентичных страниц «под капотом» может быть совершенно разный код.

Выводы

При первом «знакомстве» семантическая верстка сайта иногда кажется излишне сложной и не очень-то нужной. Зачем использовать множество тегов, если можно ограничиться только основными (визуально разницы все равно не будет)? Но это, как мы выяснили, не так.

Семантическая верстка — это в современном вебе уже давно не излишество, а общепринятый стандарт. К тому же, погружаясь в данный вопрос, вы увидите, что синтаксис HTML5 на самом деле очень логичен и понятен. Он принес разработчикам массу полезных инструментов, которые можно и нужно использовать. Главное — делать это правильно!