Когда-то давным-давно, примерно 15 лет назад, при создании сайтов мало кто интересовался, каким образом они сделаны. В верстке основным элементом был тег <table>(таблица), с помощью которого строилась сетка страницы. Повсеместно использовались теги div, span, и никто не задумывался о семантике и доступности. Но потом на свет появился HTML5, который принес нам массу нового и полезного для создания и разметки наших сайтов.
Почему семантика важна? Зачем подбирать правильные теги для контента? Зачем вообще это все, если можно слепить все с использованием тега 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 штук. Какие-то полностью утверждены спецификацией, и браузеры могут их распознать и «отрендерить», т.е. отобразить на странице. Некоторые являются устаревшими и не рекомендуются к использованию.
Нужны ли все эти теги? Возможно нет, но людям, которые профессионально занимаются вебом, нужно их знать обязательно.
Ниже расположен короткий список причин, почему важно знать семантику и использовать правильные теги для построения страниц.
- Доступность
- Поисковые роботы
- Спецификация
Доступность
Семантика очень сильно и тесно связана с доступностью, о которой мы писали некоторое время назад. Такие теги, как: <header>, <footer>, <aside>, <h1>, <nav>, <ul> и другие, помогают людям с ограниченными возможностями воспринимать сайт полностью без проблем.
Некоторые пользователи не видят ваш сайт, т.к. у них имеются проблемы со зрением, и они пользуются экранными читалками. Данные программы проходят по сайту и озвучивают информацию, опираясь на код и теги, которые там есть. К примеру, если использовать тег <nav>, устанавливающий навигацию на странице, то читалка легко озвучит, что пользователь находится в ней. Если таким же образом добавить тег для списка <ul> и его элементы <li>, то в таком случае читалка сообщит примерно следующее: «навигация => список из 5 элементов => О компании ссылка».
Если построить меню с использованием данных тегов, то люди, имеющие проблемы со зрением, будут вам благодарны. Они получат полную, удобную для них информацию и смогут пользоваться сайтом в полной мере.
Поисковые роботы
Основная цель и задача верстки — это передать смысл блоков, из которых состоит сайт. Ведь по сайтам ходят не только люди, но еще и роботы. Для человека легко разделить сайт на смысловые блоки, роботы же опираются на теги, написанные разработчиками.
К примеру, существуют поисковые роботы, которые ежедневно «парсят» или, по-простому, просматривают миллионы сайтов в интернете. Они считывают код, получают сведения, передают данные на поисковые сервера и т.п. В конце концов сайт ранжируется в поисковой выдаче.
Такие теги, как header, footer, aside, main, section, article, задают основную структуру страницы. Используя их, вы показываете роботу, где у вас шапка сайта, где подвал, а где основной контент страницы. Робот поймет сайт быстрее, поставит плюсик и пойдет дальше.
Есть очень хороший пример правильного, семантичного использования тегов при построении страницы. Посмотрите на изображение ниже.
Разработчики сайта РЖД сконструировали расписание с помощью тега table, вместо использования div. Тем самым робот google считал информацию, и их сниппет появился в выдаче по важному коммерческому запросу.
Спецификация
Семантика каждого тега четко прописана в стандартах. Каждый тег имеет свое описание и четкую роль. На данный момент есть еще разработчики, которые по старой привычке используют универсальный блочный тег div (о нем мы еще поговорим).
К примеру, выше на изображении показана вырезка из спецификации по тегу nav. Здесь описаны его категория, контентная модель, контекстная модель, атрибуты и прочие вещи. Сразу же после описывается смысл тега и какие-либо расширяющие комментарии.
Спецификации уже не первый год, браузеры давно научились понимать и распознавать теги, однако, к сожалению, на настоящий момент времени далеко еще не все используют семантические теги.
Есть отличный доклад одного популярного в узких кругах разработчика «Семантика для циников». Всем тем, кто причастен к разработке сайтов, горячо рекомендую посмотреть.
Больше статей на схожую тематику:
Основные семантические теги и их описание
С теорией покончено, приступаем к описанию некоторых основных тегов, которые используются при верстке страниц. Пройдемся по их применению, значению и покажем некоторые интересные практики.
В первую очередь затронем основополагающие теги, которые выстраивают самые крупные блоки сайта. Если взглянуть на типовую страницу, то ее контент можно легко разделить на смысловые блоки. Один из примеров разбития схематично проиллюстрирован ниже:
Header
Данный тег используется для группировки вводной части смыслового раздела или всего сайта. Как правило, содержит в себе навигацию, телефоны, почту, строку поиска, логотип и пр. Таким образом чаще всего данный тег используют как шапку сайта.
Кстати, в нашем блоге мы рассказывали, как создать шапку сайта — рекомендуем ознакомиться. Ниже вы можете увидеть типичное применение данного тега.
Есть некоторая особенность у тега header, которую большинство разработчиков упускают из виду при его применении. В спецификации не зря написано, что данный тег служит вводной частью смыслового раздела. То есть его смело можно использовать как шапку какого-то блока, а не всего сайта, как все привыкли делать. К сожалению, такое редко встретишь на просторах интернета.
Nav
Этот тег используется для создания навигации на сайте. Его следует использовать для основной навигации на сайте, а не только для каких-то групп ссылок. Ниже представлен один из вариантов меню.
Например, в подвале сайта, как правило, дублируются ссылки на внутренние страницы — их тоже можно объединить в навигацию, однако все остается на усмотрение верстальщика. Спецификация не будет считать это ошибкой.
Интересным применением тега nav будет ситуация при построении пагинации.
Ведь если задуматься, то что такое пагинация? Это ссылки на страницы. Если это ссылки, то почему бы в данном случае не использовать тег <nav>.
Main
Main отвечает за основное, главное, доминирующее и неповторяющиеся на других страницах содержимое. Важно, чтобы на странице данный тег не повторялся и использовался только единожды. Исключение одно — если не указан специальный атрибут, который отвечает за скрытие элемента.
Footer
Тег используется как заключительная часть смыслового раздела или всего сайта. Как правило, содержит дополнительные ссылки, копирайт, ссылки на социальные сети, политики конфиденциальности и т.д. Обычно его используют для создания подвала, который будет повторяться на всех страницах.
«Футер» необязательно использовать только как подвал сайта. Повторять его можно сколько угодно раз, главное, чтобы он использовался как окончание какого-то смыслового блока на странице.
Article
Представляет собой полную, независимую смысловую единицу на странице. Может легко использоваться и повторяться в любой его части. Ярким примером служит статья в блоге, какой-нибудь виджет, твит и так далее.
Внутри данного тега очень желательно использовать заголовок соответствующего уровня, и тогда блок станет независимым и целостным на все 100%. Иногда возникает дилемма, какой же тег выбрать для блока — section или article? По смыслу они очень похожи, но если копнуть чуть глубже, то сразу станет понятно. Об этом читайте ниже.
Section
Данный элемент представляет собой смысловой и логический раздел страницы. Зачастую используется в виде тематической группы контента с заголовком.
Теперь понимаете, в чем отличие между article и section? Один элемент самостоятельный и независимый, другой четко и логически привязан к определенной странице.
Нравится статья? Тогда смотрите наши курсы!
Aside
Представляет собой раздел страницы, который косвенно или побочно связан с основным контентом. Информацию, размещенную в нем, можно рассматривать как самостоятельный, так и отдельный вид контента. Как правило, такие разделы представлены в виде боковых панелей на сайте.
Главное — не стоит забывать, что тег aside не должен быть только сайдбаром в правой или левой части страницы.
На примере ниже очень удачно расположили ссылки на социальные сети в aside. Они как раз являются косвенным контентом по отношению к главной информации сайта.
dl, dt, dd
Очень интересная группа тегов, представляющая собой список описаний или список ассоциаций, который состоит из нуля или более групп пары «имя — значение».
- <dl> (сокращение от «description list») обозначает сам список описаний;
- <dt> (сокращение от «description term») обозначает термин;
- <dd> (сокращение от «description definition») обозначает описание или определение.
Использование данных тегов редко можно встретить. Возможно, это связано с тем, что многие не понимают их смысла и не умеют их правильно использовать.
Google нашел этим тегам очень интересное применение на одной своей странице.
Разработчики взяли меню в подвале страницы, во-первых, обернули его в тег <nav>, во-вторых, группу ссылок обернули в dl, его заголовок поместили в dt, и ссылку в dd. Проще это увидеть, чем описать.
Возможно, у вас возник вопрос о правильности и целесообразности использования данных тегов в текущем месте, но, кажется, разработчики google знают, что делают.
Однако все же есть очень спорный момент. Они сделали по такому же принципу блок с ссылками на подписку в соц. сетях.
Весьма неоднозначное решение и оформление блока с такого рода информацией. Оставим вопрос правильности применения открытым.
Div
Закончим наше описание самым популярным и простым тегом. Он не имеет какого особого значения. Это просто тег с помощью которого можно построить блок на сайте или страницу...или весь сайт.
В теории с помощью div можно сделать все что угодно. Забудьте все то, что было написано выше! Ведь можно использовать div и клепать сайты одним за одним. Если ты знаешь, как использовать div, то ты, получается, верстальщик и можешь идти на свое первое собеседование! Шутка, конечно, лучше использовать правильные и подходящие для этого теги.
Это далеко не все теги, которые существуют в html, мы описали лишь некоторые из них. Можно еще часами разговаривать о их семантике, как их правильно использовать, находить лучшие практики.
Примеры роста кликов, конверсий, заказов и прибыли:
Вывод
Семантика очень важна при верстке страниц сайта. Как минимум её не просто так придумали и занесли в спецификацию.
При первом знакомстве семантика кажется сложной, непонятной и отталкивающей, но если вникнуть, потерпеть и разбираться шаг за шагом, то станет все понятно и легко. HTML5 привнес много полезного, а разработчики вздохнули с облегчением. Помните, лучше иметь минимальную семантику, чем совсем ее не иметь!
А если вам нужен семантичный сайт, где теги используются по назначению, где к верстке подошли с особой скрупулёзностью, то можете смело обращаться к нам. Мы поможем вам в этом нелегком деле. :)
