Posted:
Мар 5, 2021
Comments:
0 Comments

Семантическая верстка это: Что такое семантическая вёрстка и зачем она нужна — Блог HTML Academy

Содержание

Что такое семантическая вёрстка и зачем она нужна — Блог HTML Academy

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

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

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

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

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

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

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

Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.

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

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>
    <header>
      <!— Шапка сайта —>
    </header>
    <main>
      <!— Основное содержимое страницы —>
    </main>
    <footer>
      <!— Подвал сайта —>
    </footer>
  </body>
</html>

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

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег <p>, который обозначает параграф. При этом теги <i> или <b> не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.

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

<article>

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

<section>

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

<aside>

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

<nav>

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

<header>

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

<main>

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

<footer>

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

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

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

  1. Крупные смысловые блоки на каждой странице сайта. Теги: <header>, <main>, <footer>.
  2. Крупные смысловые разделы в блоках. Теги: <nav>, <section>, <article>, <aside>.
  3. Заголовок всего документа и заголовки смысловых разделов. Теги: <h2>-<h6>.
  4. Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
  5. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

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

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

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

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

Правило для определения <article>, <section> и <div>:

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

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

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

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

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

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

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

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

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

В этой статье вы узнаете как пользоваться семантической разметкой в 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> сделает понимание этого таким же простым и для поисковиков.

Руководство по стилю HTML и правила кодирования

❮ Назад
Далее ❯

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

Вот несколько рекомендаций и советов по созданию хорошего HTML-кода.

Всегда объявлять тип документа

Всегда объявлять тип документа первой строкой документа.

Правильный тип документа для HTML:

Использовать строчные буквы в именах элементов

HTML позволяет смешивать прописные и строчные буквы в именах элементов.

Однако мы рекомендуем использовать имена элементов в нижнем регистре, потому что:

  • Смешивание имен в верхнем и нижнем регистре выглядит плохо
  • Разработчики обычно используют имена в нижнем регистре
  • Нижний регистр выглядит чище
  • Нижний регистр легче писать

Хорошо:

Это абзац.

Плохо:


Это абзац.


Закрыть все элементы HTML

В HTML вам не нужно закрыть все элементы (например, элемент

).

Однако мы настоятельно рекомендуем закрывать все элементы HTML, например:

Хорошо:

 

Это абзац.

 

Это абзац.

Неверно:

 

Это абзац.
 

Это абзац.

Использовать строчные буквы в именах атрибутов

HTML позволяет смешивать прописные и строчные буквы в именах атрибутов.

Однако мы рекомендуем использовать имена атрибутов в нижнем регистре, потому что:

  • Смешивание имен в верхнем и нижнем регистре выглядит плохо
  • Разработчики обычно используют имена в нижнем регистре
  • Нижний регистр выглядит чище
  • Нижний регистр легче писать

Хорошо:

w3schools.com/html/»>Посетите наш учебник по HTML

Плохо:

Посетите наш учебник по HTML

Значения атрибутов всегда заключайте в кавычки

HTML допускает значения атрибутов без кавычек.

Однако мы рекомендуем заключать значения атрибутов в кавычки, потому что:

  • Разработчики обычно указывают значения атрибутов
  • Значения в кавычках легче читать
  • Вы ДОЛЖНЫ использовать кавычки, если значение содержит пробелы

В хорошем состоянии:

<таблица >

Плохо:

<класс таблицы=полосатый>

Очень плохо:

Это не сработает, так как значение содержит пробелы:

<класс таблицы=полосатая таблица>

высота для изображений

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

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

Хорошо:

HTML5

Плохо:

Пробелы и знаки равенства

HTML допускает пробелы вокруг знаков равенства. Но без пробела легче читать и
группирует сущности лучше вместе.

Хорошо:

Плохо:

Избегайте длинных строк кода

При использовании HTML-редактора НЕ удобно прокручивать вправо и влево для чтения HTML-кода.

Старайтесь избегать слишком длинных строк кода.

Пустые строки и отступы

Не добавляйте пустые строки, пробелы или отступы без причины.

Для удобства чтения добавьте пустые строки для разделения больших или логических блоков кода.

Для удобочитаемости добавьте два пробела отступа. Не используйте клавишу табуляции.

Хороший:

Знаменитые города

Токио

Токио — столица Японии,
центр района Большого Токио и самый
густонаселенный мегаполис в мире.

Лондон

Лондон — столица Англии. Это самый густонаселенный город
в Соединенном Королевстве.

Париж

Париж — столица Франции. Район Парижа является одним из
крупнейшие населенные пункты Европы.

Bad:

Знаменитые города

Токио

Токио столица Японии, г.
центр района Большого Токио и самый
густонаселенный мегаполис в мире.

Лондон

Лондон
является столицей Англии. Это самый густонаселенный город в Соединенных
Королевство.

Париж

Париж — столица
Франции. Район Парижа является одним из крупнейших населенных пунктов в Европе.

Пример хорошей таблицы:

 

   

   

 

   

   

 

   

   

 

Имя Описание
A Описание A
B Описание B

Пример хорошего списка:

  • Лондон

    •  

  • Париж

  • Tokyo

Никогда не пропускайте элемент

</h3> <p> В HTML требуется элемент <code> <title> </code>.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/7/f/9/7f9a33ab41d3522242ec3d0b5c06873e.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/7/f/9/7f9a33ab41d3522242ec3d0b5c06873e.jpeg' /></noscript> </p> <p> Содержание заголовка страницы очень важно для поисковой оптимизации<br /> (SEO)! Заголовок страницы используется алгоритмами поисковых систем для определения порядка<br /> при отображении страниц в результатах поиска. </p> <p> Элемент <code> <title> </code>: </p> <ul> <li> определяет заголовок на панели инструментов браузера </li> <li> предоставляет заголовок для страницы, когда она добавляется в избранное </li> <li> отображает заголовок страницы в результатах поисковой системы </li> </ul> <p> Итак, постарайтесь сделать заголовок максимально точным и осмысленным:  </p> <p> <title>HTML<br /> Руководство по стилю и правила кодирования

Пропустить

и ?

HTML-страница будет проверена без и
теги:

Пример



  Заголовок страницы

Это заголовок

Это абзац.

Попробуйте сами »

Однако мы настоятельно рекомендуем всегда добавлять и
тега!

Отсутствие может привести к ошибкам в старых браузерах.

Пропущено и
также может привести к сбою программного обеспечения DOM и XML.

Пропустить

?

Тег HTML также может
быть опущен.

Браузеры добавят все элементы до , по умолчанию
элемент.

Пример



Название страницы

Это заголовок

Это абзац.


Попробуйте сами »

Однако мы рекомендуем использовать тег .

Закрыть пустые элементы HTML?

В HTML закрывать пустые элементы необязательно.

Разрешено:

<мета charset="utf-8">

Также разрешено:

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

Добавить атрибут lang

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

Пример




  Заголовок страницы

Это
заголовок

Это абзац.


Попробуйте сами »

Метаданные

кодировка символов должна быть определена как можно раньше в документе HTML:




 
Название страницы

Настройка области просмотра

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

Вы должны включать следующий элемент на все свои веб-страницы:

Это дает браузеру инструкции о том, как
для управления размерами страницы и масштабированием.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).

Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра :

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

Без
метатег области просмотра


Мета-тег viewport

HTML-комментарии

Короткие комментарии должны быть написаны в одну строку, например:

Комментарии, которые занимают более одной строки, должны быть написаны как this:

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

Использование таблиц стилей

Используйте простой синтаксис для ссылки на таблицы стилей (
атрибут type необязателен):

Короткие правила CSS можно записать сжатыми, например:

p.intro {font-family:Verdana; font-size:16em;}

Длинные правила CSS должны быть написаны на нескольких строках:

body {
  background-color: светло-серый;
  семейство шрифтов: «Arial
Черный», Helvetica, без засечек;
размер шрифта: 16em;
цвет:
черный;
}

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

Загрузка JavaScript в HTML

Используйте простой синтаксис для загрузки внешних скриптов (код
атрибут type необязателен):