Введение
Вышедшая в 2014 году пятая версия HTML имеет значительные отличия от HTML4. Это неудивительно, так как временной разрыв между версиями составляет – если брать в расчет версию 4.01 – почти 15 лет! Например, в HTML5 было введено понятие DOM (Document Object Model — «объектная модель документа»), которое существовало и до этого, но не являлось частью языка. Противоречивые мнения вызвало введение семантических тегов: одни считают, что они значительно облегчили жизнь как верстальщикам, так и интернет-пользователям, другие утверждают, что предыдущая версия разметки выглядит более логичной и понятной, а семантические теги являются избыточными. В данной статье мы попробуем ответить на вопрос, который периодически всплывает в различных интернет-сообществах, – зачем нужны семантические теги, и нужны ли они вообще?
Зачем нужны семантические теги
Несмотря на то, что уже в HTML4 можно было создавать сайты с понятной для пользователей структурой, для поисковых систем и браузеров элементы страницы оставались однотипными, ведь каждый из элементов был создан при помощи тега <div>, который, по сути, является обычной прямоугольной областью на странице, не несущей какую-то конкретную информацию, кроме той, которую в нее заложит разработчик. Для решения этой проблемы было принято решение ввести семантические теги, используя которые можно сделать структуру страницы более понятной и логичной.
Это нововведение уже нашло свое применение в мире смартфонов и ридеров – например, используя браузер Safari на iPhone или iPad, вы можете перейти в режим чтения, когда на экране выводится только текстовая информация страницы – и воспринимать ее гораздо легче, ведь нет отвлекающих элементов в виде картинок, баннеров, рекламы. Однако этот режим будет доступен лишь в том случае, если страница имеет семантическую разметку, благодаря которой браузер может понять, где находится заголовок, где текст, а где навигация. Как раз ту разметку, о которой идет речь.
Не стоит забывать и о поисковых роботах – семантическая разметка поможет им правильно проанализировать страницу, отделив важную информацию, касающуюся содержимого страницы, от второстепенной (шапка, подвал, навигация). И это обязательно положительно скажется на SEO-продвижении сайта.
Таким образом, главное предназначение семантической разметки – делать структуру документа более понятной на всех этапах использования, от разработки до публикации в сети и индексации поисковыми машинами.
Структура документа в HTML4 и HTML5
Чтобы различие между версткой было более наглядным, рассмотрим реализацию структуры документа в HTML4 и HTML5 в схемах:
Несложно заметить, что обновленная разметка представляет собой более прозрачную и интуитивно понятную структуру, которая не только удобна при разработке, но и отвечает изначальной философии веб-разработчиков.
Новые семантические элементы разметки HTML5
При этом следует отметить, что в HTML5 не исчезли какие-то старые элементы – наоборот, теперь разработчики могут использовать новые, более удобные теги, каждый из которых выполняет свою особенную функцию. Ознакомимся с основными элементами:
<header> - формирует верхнюю часть элемента или страницы (шапку, основной заголовок или группу заголовков), при этом может располагаться в любой части страницы или вообще отсутствовать;
Примечание.
Ранее группу заголовков (например, уточняющие подзаголовки) советовали объединять тегом <hgroup>, но позднее было принято решение удалить этот элемент из спецификации, поэтому использовать его не рекомендуется.
Совет.
Не используйте тег <header> внутри тега <article>, если статья содержит 1 заголовок – лучше ограничиться следующей структурой:
<article>
<h1>Название</h1>
<!-- Содержимое записи -->
</article>
<nav> - создает раздел с навигационными ссылками на странице или на сайте; в качестве элементов панели навигации могут выступать теги списков <ul>, <il> и тег адреса документа < a href="URL">, допускается использование заголовков (к примеру, <h2>);
Совет.
С короткими списками ссылок (например, в подвале) тег <nav> использовать не рекомендуется. Используйте данный тег для главной навигации и поиску по сайту, а также внутренней навигации.
<article> - группирует записи, публикации или статьи;
<section> - разделяет страницы или записи на тематические блоки, но при этом, в отличие от тега <div>, не является блоком-оберткой – тег <section> направлен на определение смысловой секции содержимого и обязательно должен содержать заголовок;
<aside> - группирует содержимое, которое будет показано в блоке сбоку от основного содержания страницы (например, для выделения цитат, карточек и т.д.);
<footer> - формирует нижнюю часть элемента или страницы, которая обычно состоит из технической и юридической информации, контактных данных;
<address> - определяет контактную информацию, касающуюся автора текста или страницы;
<figure> - группирует элементы (например, иллюстрации и подписи, но не ограничивается именно этими элементами – вы можете группировать видео, аудиоконтент, цитаты, таблицы и многое другое по своему желанию), для создания подписи необходимо внутри данного тега использовать тег < figcaption>.
Вывод
Введение семантических тегов – это закономерный результат развития интернет-технологий, когда важна не только внешняя сторона проекта, но и его внутренняя, невидимая глазу пользователя часть. Использование семантической разметки позволяет расширить функционал вашего сайта, сделать его современным и актуальным, а также удобным для всех типов пользователей (в том числе для тех, кто использует программы экранного доступа).
Комментарии