HTML для владельца сайта: минимум, который нужно понимать при приёмке работы
HTML - это «скелет» страницы: заголовки, текст, кнопки, формы, ссылки. Без него браузер не знает, где главный заголовок, где цена товара, а где форма заявки. Владельцу бизнеса не нужно писать разметку самому, но при приёмке сайта от подрядчика базовое понимание HTML помогает поймать ошибки до оплаты: пустые заголовки для SEO, сломанные формы, «картинка вместо текста» для Google, отсутствие alt у фото, дубли H1 на каждой странице. Это не курс программирования - это чек-лист здравого смысла на 30 минут проверки.
- HTML - структура страницы, которую «читает» браузер и поисковик
- Зачем владельцу - принять работу осознанно, не терять SEO и конверсию из-за разметки
- Что проверить - заголовки, формы, ссылки, alt у изображений, мобильная вёрстка
- Связка с CSS и JS - HTML задаёт «что», CSS - «как выглядит», JavaScript - «как ведёт себя»
- Главный риск - красивая картинка на экране при «пустой» или кривой разметке под капотом
HTML простыми словами
HTML (HyperText Markup Language) - язык разметки, не программирования. Он описывает блоки страницы тегами: <h1> - главный заголовок, <p> - абзац, <a> - ссылка, <form> - форма, <img> - изображение.
Пример фрагмента (упрощённо):
<h1>Ремонт квартир в Ташкенте</h1>
<p>Срок от 14 дней. Бесплатный замер.</p>
<a href="/contacts/">Оставить заявку</a>
Браузер не рисует HTML как код - он строит страницу по этим инструкциям. Поисковик (Google, Яндекс) тоже опирается на HTML: что в <title>, какой <h1>, есть ли текст в ссылках.
| Технология | Роль | Аналогия |
|---|---|---|
| HTML | Структура и смысл блоков | Каркас здания |
| CSS | Цвета, шрифты, отступы, адаптив | Отделка и фасад |
| JavaScript | Клики, корзина, слайдеры, чат | Лифт, кондиционер, умный дом |
| PHP / backend | Данные с сервера, заказы, письма | Инженерные системы за стенами |
Важно: сайт на WordPress, Tilda, Bitrix или Django всё равно отдаёт HTML в браузер. CMS просто генерирует его автоматически. При приёмке вы проверяете результат, а не ручной код.
Что проверить при приёмке сайта: чек-лист владельца
1. Заголовки и SEO-разметка
- Один
<h1>на страницу - главная тема страницы. Два H1 «Ремонт» и «Контакты» на одной - сигнал к правке. - Иерархия H2, H3 - логичная: раздел услуг → подуслуга, не прыжок с H1 сразу в H4 «мелким шрифтом».
<title>(вкладка браузера) - уникальный, с ключевым запросом, не «Главная» на всех страницах.- Meta description - осмысленное описание для сниппета в поиске, не пустое и не копипаст с другой страницы.
Как проверить без кода: откройте каждую ключевую страницу, посмотрите текст вкладки браузера; пройдитесь по заголовкам глазами - один главный, остальные подчинённые.
2. Текст vs «картинка с текстом»
Если прайс, акция или УТП нарисованы только на JPG/PNG, поисковик не прочитает цены и условия. Для SEO-аудита это красный флаг.
Правило: важный текст - в HTML (можно стилизовать CSS). Картинка - для иллюстрации, не для единственного источника информации.
3. Изображения: alt и скорость
- У каждого
<img>должен быть alt - короткое описание для SEO и скринридеров («Кухня после ремонта, белые фасады»). - Логотип в шапке - alt с названием компании.
- Декоративные элементы - alt="" допустим, но не пропуск атрибута на товарных фото.
4. Ссылки
- Кнопка «Позвонить» ведёт на
tel:+998..., «Написать в Telegram» - на реальный мессенджер. - Внутренние ссылки не битые: «Услуги», «О нас», «Контакты» открываются без 404.
- Текст ссылки осмысленный: «Подробнее о ремонте» лучше, чем «нажмите здесь» десять раз подряд.
5. Формы заявок
- Поля именованы (name, id) - иначе CRM и почта получат «пустую» заявку.
- Кнопка отправки -
<button type="submit">или корректная ссылка, не div без действия. - После отправки - понятное сообщение «Спасибо, мы перезвоним», а не белый экран.
- На мобильном клавиатура для телефона - тип
tel, для email -email.
6. Мобильная версия
HTML + CSS должны давать читаемый текст без горизонтальной прокрутки. Меню открывается, телефон кликабелен, форма не обрезана. Это частично CSS, но структура HTML (порядок блоков, формы) влияет на UX и GEO-продвижение.
7. Язык и кодировка
- Атрибут
lang="ru"(или нужный язык) на<html>- для поиска и доступности. - Кириллица отображается без «кракозябр» - проблема кодировки UTF-8.
Семантика: зачем «правильные» теги
Современный HTML рекомендует смысловые теги:
| Тег | Назначение |
|---|---|
<header> |
Шапка сайта или раздела |
<nav> |
Меню навигации |
<main> |
Основной контент страницы |
<article> |
Статья, новость, карточка блога |
<section> |
Логический раздел |
<footer> |
Подвал с контактами и реквизитами |
Зачем владельцу: семантика помогает Google понять, где главный текст, а где меню и реклама. Старый способ «всё через <div>» часто работает визуально, но хуже для SEO и поддержки.
На приёмке достаточно спросить подрядчика: «Основной контент в <main>? Заголовки не нарисованы div-ами?» - и получить честный ответ.
HTML, CSS и JavaScript: кто за что отвечает при приёмке
| Жалоба | Скорее всего | Кому предъявить |
|---|---|---|
| «Некрасивый шрифт / цвет» | CSS | Дизайнер / вёрстальщик |
| «Кнопка не нажимается / корзина пустая» | JavaScript | Frontend-разработчик |
| «Google не видит текст / нет заголовков» | HTML / SSR | Разработчик + SEO |
| «Форма не приходит на почту» | Backend (PHP, API) | Backend |
| «На телефоне всё съехало» | CSS + HTML-структура | Вёрстка |
Не смешивайте: просьба «поправить HTML» при проблеме только цвета - лишняя. Но если нет текста в разметке - это не «дизайн», это HTML и контент.
Типичные ошибки подрядчиков, которые ловит владелец
Дубли и пустышки
- Одинаковый
<title>на 20 страницах каталога. - H1 «Добро пожаловать» на всех лендингах кампании.
- Пустые
<meta description>или автогенерация «Lorem ipsum».
Конструктор vs кастом
Tilda, Webflow, WordPress-тема - HTML генерируется шаблоном. Это нормально, если:
- вы можете менять title, H1, alt в админке;
- лишний код не ломает скорость (десятки вложенных div).
Красный флаг: подрядчик отдал «сайт на Tilda», а вы не имеете доступа к правкам текстов и мета-тегов - вы заложник.
Скрытый текст и «SEO-чёрные» приёмы
Белый текст на белом, сотни ключевых слов в <div style="display:none"> - риск санкций поиска. При приёмке: «Покажите, нет ли скрытых блоков с ключами» - профессионал не обидится.
iframe вместо контента
Вся страница «Услуги» - встроенный PDF или Google Doc в iframe. Для пользователя ок, для SEO - слабо. Лучше HTML-текст + PDF как дополнение.
Как посмотреть HTML без навыков программирования
- Просмотр кода страницы - правый клик → «Просмотреть код страницы» (Chrome, Firefox, Edge). Ищите
<h1>,<title>,<form>. - DevTools (F12) - вкладка Elements: клик по блоку на странице → видно тег в дереве. Полезно для «это текст или картинка?».
- Расширения SEO - Meta SEO Inspector, SEO META in 1 CLICK: title, description, H1 на экране.
- Google Search Console - после запуска: индексация, ошибки, как Google видит URL.
- Валидатор W3C (validator.w3.org) - необязательно для бизнеса, но подрядчик с сотней критических ошибок - повод для разговора.
30-минутный маршрут приёмки: главная, услуга, контакты, одна карточка товара/статьи - на каждой title, H1, форма, телефон, 2-3 картинки с alt.
Когда настаивать на доработке HTML
| Ситуация | Действие |
|---|---|
| Нет уникальных title/H1 на ключевых страницах | Требовать до подписания акта |
| Весь прайс в PNG | Перенести текст в HTML или таблицу |
| Форма «отправляется», писем нет | Проверить backend, но и HTML формы |
| Сайт «белый» при отключённом JS | Для SEO нужен контент в HTML (см. JavaScript) |
| Нет alt на товарах интернет-магазина | Исправить до запуска рекламы |
Не требуйте «идеальный W3C» на CMS-сайте - требуйте бизнес-результат: находят в поиске, заявки доходят, страница понятна на телефоне.
Итог
HTML - основа, которую редко видят глазами, но по ней судят браузер, поисковик и частично качество работы подрядчика. Владельцу достаточно:
- понимать разницу HTML / CSS / JS;
- пройти короткий чек-лист при приёмке;
- не принимать «картинку вместо текста» и пустые мета-теги;
- хранить доступ к CMS, где правятся title, H1 и alt.
Хороший HTML не хвалят на совещаниях - плохой стоит позиций в Google и заявок, которые так и не нашли форму.
Часто задаваемые вопросы
Нужно ли владельцу бизнеса учить HTML?
Нет, для ежедневной работы - достаточно админки CMS и чек-листа при приёмке. Да, на базовом уровне - если вы лично принимаете сайт, контролируете SEO и не хотите зависеть от формулировки «это не наша зона». 2-3 часа на понимание тегов и просмотр кода окупаются одной пойманной ошибкой в title на главной.
Чем HTML отличается от CSS?
HTML отвечает на вопрос «что на странице»: заголовок, абзац, список услуг, форма. CSS - «как это выглядит»: размер шрифта, цвет кнопки, отступы, сетка на мобильном. Можно иметь правильный HTML и «уродливый» CSS (исправляется дизайном) или красивую картинку без HTML-текста (плохо для SEO). При приёмке проблемы структуры и текста - HTML; внешнего вида - CSS.
Я не писал HTML - откуда он на моём WordPress-сайте?
CMS и конструкторы генерируют HTML автоматически. Тема WordPress, блоки Gutenberg, Elementor, Tilda - всё превращается в HTML при открытии страницы. Вы редактируете контент в интерфейсе, а система собирает разметку. При приёмке важно проверить результат (title, H1, alt), а не учить PHP - об этом в статье про WordPress, Bitrix и OpenCart.
Как понять, что HTML сделан плохо?
Признаки: одинаковый title на всех страницах; нет H1 или их несколько; важный текст только на изображениях; формы без подписей полей и без сообщения об успехе; битые ссылки; отсутствие alt у товарных фото; сайт в поиске показывает «мусорный» сниппет. Инструменты: просмотр кода, SEO-расширение, Search Console после запуска, SEO-аудит раз в полгода.
Влияет ли HTML на SEO и продажи?
Да, напрямую. Title и H1 задают тему для поиска; текст в HTML индексируется; alt помогает картинкам в выдаче; семантика и скорость загрузки (лишний HTML раздувает страницу) влияют на ранжирование. Для продаж: форма с правильной разметкой реже ломается на мобильных; кликабельный телефон в <a href="tel:..."> даёт звонки. Плохой HTML редко убивает бизнес за день, но тихо сливает трафик месяцами.