Что такое сайт на HTML и CSS

HTML (HyperText Markup Language) — язык разметки. Он говорит браузеру: вот заголовок, вот абзац, вот картинка, вот кнопка. CSS (Cascading Style Sheets) — язык оформления: какой шрифт, цвет, отступы, как блоки располагаются на телефоне и на компьютере.

Сайт на HTML называют статичным: каждая страница — готовый файл. Когда человек открывает company.ru/uslugi.html, сервер отдаёт ему файл uslugi.html без всякой обработки. Для сравнения: CMS вроде WordPress при каждом запросе собирает страницу из базы данных и шаблонов, а конструктор вроде Тильды хранит сайт на своих серверах и отдаёт его со своей инфраструктуры.

Как выглядит код сайта на HTML

Минимальная страница выглядит так:

```html

Ремонт ванной под ключ за 14 дней

Смета за 1 день, гарантия 3 года по договору.

```

Здесь видно всё, что важно для поиска: заголовок страницы title, описание description, главный заголовок h1. Строка viewport отвечает за то, чтобы сайт нормально выглядел на телефоне. Подробное описание тегов есть в справочнике MDN по HTML.

Реальный сайт — это несколько таких файлов, общий файл стилей style.css, папка с картинками и, при необходимости, скрипты: формы, слайдеры, счётчик Метрики.

Плюсы сайта на HTML

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

Безопасность. У статичного сайта нет админки, которую можно подобрать, нет базы данных для SQL-инъекций и нет устаревших плагинов. Самые частые взломы сайтов малого бизнеса, которые мы видим, — через непродлённые плагины WordPress. У HTML-сайта такой двери просто нет. Уязвимыми остаются форма заявки и доступ к хостингу, но это небольшая и понятная зона.

Дешёвый хостинг. Статичному сайту хватает самого простого тарифа виртуального хостинга. Ориентир — от пары тысяч рублей в год.

Нет абонентской платы платформе. Вы не зависите от тарифов конструктора и их изменений. Файлы сайта ваши, их можно перенести к любому хостингу за час.

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

Минусы сайта на HTML

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

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

Формы и интеграции — отдельно. У конструктора форма с отправкой в почту, Telegram и CRM настраивается мышкой. На HTML-сайте нужен обработчик формы на сервере или сторонний сервис. И обязательно проверить, где хранятся данные заявок: по закону о персональных данных их нужно записывать в базах на территории России.

Нет каталога, корзины, кабинета. Для магазина на сотни товаров, фильтров и личного кабинета статичный сайт не подходит без серьёзной разработки.

Зависимость от разработчика. Если сайт свёрстан сложно и без комментариев, другой разработчик будет долго разбираться. Попросите исполнителя передать исходники и коротко описать, где что лежит.

Сайт на HTML, CMS или конструктор: сравнение

Цены Тильды — по странице тарифов, остальные цифры — ориентир по рынку. Подробное сравнение конструктора и сайта под заказ — в статье Тильда или сайт под заказ. Плюсы и подводные камни WordPress — в материале сайт на WordPress.

Интересная деталь: на тарифе Business Тильда позволяет выгрузить код сайта. Получается тот же HTML-сайт, который можно разместить на своём хостинге. Но такой код тяжелее ручной вёрстки и править его неудобно — это скорее страховка на случай переезда, чем способ работы.

Кому подходит сайт на HTML

Хороший выбор, если совпадают условия:

1. Сайт небольшой: лендинг или до 20–30 страниц.
2. Контент меняется редко: раз в месяц или реже, а не каждый день.
3. Важна скорость: сайт работает под рекламу, и каждая секунда загрузки на мобильном влияет на стоимость заявки.
4. Нужна свобода в дизайне без ограничений блоков конструктора.
5. Не хочется платить абонентскую плату платформе и зависеть от её тарифов.

Не лучший выбор, если:

• у вас интернет-магазин с сотнями товаров, фильтрами и обменом с 1С;
• вы ведёте блог и публикуете статьи каждую неделю без помощи разработчика;
• нужен личный кабинет, бронирование, сложный калькулятор с базой данных;
• нет человека, который будет вносить правки, и нет бюджета на подрядчика.

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

Как править сайт на HTML без программиста

Главное возражение против HTML — «я не смогу поменять цену сам». Сейчас есть несколько способов.

Правка текста своими руками: пошагово

Если правка простая — поменять цену или телефон:

1. Сделайте копию файла, прежде чем что-то менять.
2. Откройте файл в текстовом редакторе с подсветкой кода или в файловом менеджере хостинга.
3. Найдите нужную фразу поиском: Ctrl+F или Cmd+F.
4. Поменяйте только текст между тегами, не трогая угловые скобки и кавычки.
5. Сохраните и загрузите файл обратно на хостинг.
6. Проверьте сайт с телефона и компьютера, обновив страницу.

Если что-то сломалось, верните копию. Это главная страховка.

AI-агент для правок

Мы в студии делаем сайты с AI-агентом, который вносит правки по голосовой или текстовой команде: «поменяй цену на ремонт ванной на 190 000», «добавь отзыв Марии с фото». Агент находит нужное место в коде, вносит изменение и публикует. Для статичного сайта это особенно удобно: код простой, а правка проверяется сразу. Где такой подход пока не справляется и как сравнить его с подрядчиком по цене, — в статье как вносить правки на сайт без программиста.

Условный пример: лендинг на HTML и на конструкторе за три года

Пример условный, цифры ориентировочные. Компания по установке септиков, лендинг на 8 экранов, реклама в Директе. Правки — 1–2 в месяц: цены, фото объектов, акции.

На бумаге конструктор дешевле. Но сравнение меняется, если учесть скорость. Допустим, HTML-лендинг грузится на мобильном на 1,5 секунды быстрее, и за счёт этого конверсия из клика в заявку выше на 0,5 процентного пункта. При 3 000 кликов в месяц это 15 дополнительных заявок. Если хотя бы пятая часть из них превратится в договор со средним чеком 150 000 ₽, разница перекрывает все расходы за несколько месяцев.

Вывод: HTML выгоднее там, где сайт работает под платный трафик и скорость конвертируется в деньги. Если сайт — визитка без рекламы и правки вы делаете сами, конструктор проще.

Что проверить у готового HTML-сайта

1. Есть ли у вас все исходные файлы, а не только доступ к хостингу.
2. Прописаны ли title и description на каждой странице.
3. Есть ли строка viewport и нормально ли сайт выглядит на телефоне.
4. Куда уходят заявки из форм и где они хранятся.
5. Стоит ли Метрика и настроены ли цели.
6. Есть ли файлы robots.txt и sitemap.xml.
7. Проходит ли код базовую проверку валидатором W3C без критических ошибок.
8. Как и кто вносит правки, сколько это стоит.

Как опубликовать такой сайт на своём хостинге, пошагово — в статье как разместить сайт в интернете.

Если у вас уже есть сайт на HTML и вы не уверены, всё ли в нём настроено для рекламы и поиска, оставьте контакты — посмотрим.