HTML

HTML (HyperText Markup Language) – это язык разметки, которым описывают содержимое веб-страницы: где заголовок, где абзац, картинка, ссылка или форма. Браузер читает HTML и строит по нему страницу, а поисковый робот по нему понимает, о чём она.

Любой сайт, хоть лендинг, хоть интернет-магазин на CMS, в итоге отдаёт браузеру HTML. Заказчик его почти не видит: он видит дизайн. Но решения верстальщика в разметке потом всплывают в SEO, в скорости загрузки и в том, может ли человек с плохим зрением оформить заказ.

Чем HTML отличается от CSS и JavaScript

На главной у нас в стеке значок «HTML и CSS», и их часто называют вместе. Но работа у них разная:

Если сайт работает на CMS, HTML пишут один раз в шаблонах, а контент-менеджер заполняет поля в админке. Поэтому ошибка в шаблоне карточки товара повторяется на всех тысячах карточек сразу.

Так выглядит кусок разметки страницы услуги:

<main>
  <h1>Ремонт посудомоечных машин</h1>
  <img src="bosch.jpg" alt="Мастер меняет насос посудомойки Bosch">
  <a href="/price/">Цены на ремонт</a>
</main>

Кто развивает HTML и куда делся HTML5

Стандарт HTML ведёт WHATWG, рабочая группа, которую создали разработчики браузеров. С 2019 года WHATWG и W3C договорились работать над одной версией, и теперь это «живой стандарт» (HTML Living Standard): его дополняют постоянно, без номеров версий. «HTML5» в самой спецификации называют модным словом для современных веб-технологий. Поэтому, если в коммерческом предложении написано «вёрстка на HTML5», это не особое достоинство, а обычная современная вёрстка.

Какие места разметки читают Яндекс и Google

Поисковику не важно, красивая ли кнопка. Ему важно, что написано в тегах и как страницы связаны ссылками.

• Title. Текст из тега title поисковики берут для заголовка сниппета.
• Заголовки H1–H6. Google в руководстве для начинающих пишет, что для поиска порядок заголовков не важен, но последовательная структура сильно помогает экранным дикторам. Подробнее в статье Заголовки H1–H6.
• Атрибут alt. Короткое описание картинки, которое объясняет её связь с текстом.
• Ссылки. Робот находит новые страницы по ссылкам, а текст ссылки подсказывает, о чём страница. Пункт меню, который открывает раздел через скрипт по клику на div, для робота может вообще не быть ссылкой.
• Микроразметка. Атрибуты и блоки JSON-LD, по которым поисковик понимает цену, рейтинг, адрес.

Отдельная история с сайтами на React и Vue: если HTML собирается в браузере скриптом, робот получает почти пустую страницу. Как с этим работают, рассказано в статье JavaScript SEO: CSR и SSR.

Почему вёрстка «на одних div» обходится дороже

У HTML есть теги со смыслом: header, nav, main, article, footer, button, label. А есть div, просто коробка. Технически страницу можно сверстать только из div и раскрасить через CSS, и выглядеть она будет так же. Разница проявится позже:

• экранный диктор не поймёт, где меню, а где основной текст, и не сможет перейти к нужному блоку;
• кнопка из div не нажимается с клавиатуры, пока разработчик не допишет это вручную;
• поле формы без label диктор озвучит как «поле ввода», без названия.

Такие вещи хорошо ловят автоматические проверки доступности, например axe-core. Про сам подход читайте в статье Семантическая вёрстка.

Что заказчику проверить в вёрстке без знания кода

Для приёмки не нужно читать код целиком. Хватит браузера и получаса:

1. Откройте исходный код страницы (Ctrl+U в Chrome и Яндекс Браузере). Если текст статьи и цены там есть, робот их увидит. Если вместо них пустой контейнер, обсудите с разработчиком серверный рендеринг.
2. Найдите поиском по коду «<h1». На странице должен быть понятный главный заголовок, а не логотип или слово «Каталог» на всех страницах.
3. Проверьте пару картинок товаров: есть ли у них alt и описывает ли он товар, а не «img_0453».
4. Пройдите форму заявки клавишей Tab. Фокус должен идти по полям по порядку, а кнопка «Отправить» нажиматься с Enter.
5. Прогоните страницу через валидатор W3C (validator.w3.org). Пара предупреждений не страшна, а десятки ошибок незакрытых тегов говорят о небрежной вёрстке.

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

Код страницы, HTML5 и проверка вёрстки

Чистую семантическую вёрстку делаем при разработке сайта под ключ. Если сайт уже работает и в разметке нашлись проблемы с заголовками, alt или формами, исправим их при доработке существующего сайта.

Источники

• WHATWG: HTML Living Standard, раздел «Introduction»
• Google Search Central: руководство по поисковой оптимизации для начинающих
• W3C Markup Validation Service