Секреты использования семантической верстки в HTML5 | by Stas Bagretsov

7 min read

·

Feb 11, 2018

В этой статье вы узнаете как пользоваться семантической разметкой в HTML5 и как это делать правильно.

Что такое семантический HTML5?

Если вы более менее знакомы с HTML, то вы должны знать про HTML теги, которые в большинстве своём используются для форматирования контента — они говорят браузеру как показывать контент на странице. Они не дают определение типу содержащегося контента или какую роль играет контент на странице.

Перевод статьи How to Use Semantic HTML5 for Document Structure — a guide.

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

Семантический HTML5 устраняет этот недостаток, определяя точные теги для пояснения четкой роли контента на странице. Эта дополнительная информация помогает роботам/индексаторам, таким как Google и Bing лучше понять какой контент важен, какой является второстепенным, какой используется для навигации и так далее. Добавляя семантические HTML теги на ваши страницы, вы даете дополнительную информацию, которая помогает поисковикам понимать роли и относительную важность разных частей ваших страниц.

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

А это семантические элементы. Они ясно определяют роль содержимого контента.

Почему надо это использовать?

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

Google и Bing боты, если и не слепы, то имеют серьёзное ослабление со зрением. Для них визуальные пояснения феноменально сложно увидеть и понять.

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

Most important content — самый важный контент

Само по себе, использование HTML5 не произведет революции в работе вашего SEO. Как вы знаете, успешное SEO это совокупность многих и многих мелких деталей. И это одна из таких малых деталей, которая улучшит понимание контента вашего сайта со стороны любого поисковика, что заметно внесет вклад в ваши SEO усилия.

Смотря наперед, учитывая как будет развиваться поисковая оптимизация в предстоящие года, расширенный и связная коммуникация с этими системами будет одним из двух краеугольных камней вашей SEO/AEO стратегии.

Как всё это выглядит?

Примеры семантических HTML тегов включают в себя <nav>, <footer> и <section>. Так же есть гораздо больше примеров семантических HTML5 тегов, которые могут быть использованы, для примера <blockquote> и <em>, но в этой статье мы разберем только те семантические HTML теги, которые вам понадобятся для простого разделения контента страницы на разные части.

Следующие HTML5 теги могут использоваться вместо <div> тегов, чтобы разделить контент вашей страницы на определяемые части, каждая из которых будет выполнять конкретную роль. Как вы уже поняли, такие системы как Google и Bing любят это.

Ясная установка границ и подробная расстановка атрибутов ролей для каждой части контента, делает страницу горазду понятнее и легче для правильно индексации для Google и Bing.

Обратите внимание, что эти теги ведут себя как <div> теги, что говорит о том, что они могут заменить существующие <div> без влияния на общий макет. В большинстве случаев применение семантического HTML5 может быть легко применено нахождением подходящей пары <div> и </div> и её заменой.

Примеры семантического HTML5

Супер простой семантический HTML5 пример:

Тут мы довольно просто определяем, какую роль играет каждая часть страницы. Когда вы начинаете разметку HTML5, то вот как безопаснее всего это начать — header, nav, main, footer.

Лучше иметь супер простое исполнение, которое на 100% верное, чем сложное, но неверное.

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

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

Более сложные примеры

Использование секций и <article>:

Тут мы сделали иерархическую систему в нашем главном контенте. Тут есть охватывающая всё <article>, которая определяет центральный контент внутри тега <main>. Это даёт краткий обзор темы этой части страницы. В этой <article> мы имеем несколько под-тем, которые формируют основную тему, которая определяет вложенными секциями.

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

В реальном же мире, семантическая разметка часто следует за основной разметкой более явно, чем в этом примере. Запомните главное правило: Секция формирует часть чего-то ещё, а <article> это что-то, что само по себе. Так же примите во внимание, что тут мы добавили секцию навигации в подвал. Логически, как и в шапке, подвал содержит элементы навигации.

Связанный Aside

Тут мы добавили две части связанного контента к главной <article> контента. Используя aside, мы определяем то, что связанный контента (aside) опционален. То есть основная секция контента может быть показана без aside и все равно будет понятна.

Косвенно связанный aside

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

Тут мы определили несколько косвенно связанного контента на странице, за пределами основного <article> для контента. Тут мы определяем, что контент сбоку не напрямую связан с главной <article>. И этого вполне достаточно в большинстве случаев.

Наша финальная версия

Полезные советы

<section> vs. <article>

Это очень обсуждаемая тема. И нет четких правил о <sections> и <articles>, а их применение довольно гибкое само по себе. Они более менее похожи и могут быть использованы взаимозаменяемым способом в большинстве случаев. Только будьте уверены в том, что их использование логично и последовательно.

Личный совет. Я заметил, что вложенные секции внутри <article> контента, логичнее как для поисковика, так и для человека. Так HTML код легче читать для разработчика.

Вложенные элементы

Элементы могут вкладывать в себя другие элементы. Для примера, <article> может иметь свой собственный <header>, <footer>, <h3> и даже <nav> (анкоры как хороший пример). Я не дал иллюстрацию для этого «супер вложения» и этому есть своя причина. С точки зрения SEO нет реальной пользы уходить так глубоко в семантический HTML5.

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

Чего НЕ ДЕЛАТЬ

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

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

Следующие шаги?

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

Общение

Общение с поисковиками (HTML5 имеет важную роль) это одна из двух колон долгосрочной SEO стратегии, которая приведет к успеху в мире где нам нужно будет оптимизироваться для поисковых систем. Есть много отличных вещей, которые вы можете сделать для улучшения подобного общения. И семантический HTML5 тому пример. Schema разметка это ещё один пример.

Надежность

Вторая колонна это надежность. Есть также клевые вещи, делая которые вы усилите доверие к себе. Все SEO и AEO сходятся к общению и надежности.

В завершение: памятка для хорошей HTML5 SEO разметки

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

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

Когда-то давным-давно, примерно 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 штук. Какие-то полностью утверждены спецификацией, и браузеры могут их распознать и «отрендерить», т.е. отобразить на странице. Некоторые являются устаревшими и не рекомендуются к использованию.

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

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

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

Доступность

Семантика очень сильно и тесно связана с доступностью, о которой мы писали некоторое время назад. Такие теги, как: <header>, <footer>, <aside>, <h2>, <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 привнес много полезного, а разработчики вздохнули с облегчением. Помните, лучше иметь минимальную семантику, чем совсем ее не иметь!

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

Изучение HTML: Шпаргалка по семантическому HTML

Семантический HTML

Семантический HTML привносит смысл в код, который мы пишем. До семантического HTML элементы не имели никакого значения в отношении того, что они делают или какой контент в них помещается. Такой элемент, как

 
  
 
 
 
 
 
это нижний колонтитул