Сделать сайт на чистом HTML это создать обычный текстовый файл index.html, написать в нём несколько тегов и открыть его в браузере. Ниже вы соберёте минимальную, но рабочую страницу руками, добавите к ней оформление на CSS и опубликуете её бесплатно. А заодно увидите современный способ: ту же HTML-страницу сегодня можно не печатать вручную, а получить у ИИ по текстовому описанию за пару минут.
Что значит «сайт на чистом HTML»
HTML это язык разметки: вы описываете структуру страницы тегами (заголовок, абзац, картинка, ссылка), а браузер читает эти теги и рисует страницу. За внешний вид отвечает уже CSS. «Чистый» HTML значит, что вы пишете разметку сами, без конструкторов и фреймворков. Понимать эту базу полезно, даже если позже вы соберёте сайт в конструкторе или с помощью ИИ: вы будете видеть, из чего состоит страница, и сможете её править.
Для простой страницы (визитка, лендинг из одного экрана, портфолио) чистого HTML и CSS хватает полностью. Сложную логику (формы с сохранением данных, личные кабинеты, база) один HTML не умеет, для этого нужен код на сервере.
Минимальная структура: файл index.html
Сайт начинается с одного файла. Назовите его index.html: именно это имя браузеры и хостинги по умолчанию открывают как главную страницу (index значит «оглавление»). Вот минимальная, но полностью корректная HTML5-страница, каждая строка отдельно:
- <!DOCTYPE html>
- <html lang="ru">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Моя первая страница</title>
- </head>
- <body>
- <h1>Привет!</h1>
- <p>Это мой сайт на чистом HTML.</p>
- </body>
- </html>
Разберём по частям. <!DOCTYPE html> в начале говорит браузеру, что это современный HTML5. <html lang="ru"> это корневой тег, внутри которого лежит вся страница, а атрибут lang сообщает язык. Внутри две части: <head> (служебная информация, её не видно на странице) и <body> (всё видимое содержимое).
В head важны две строки: meta charset="UTF-8" отвечает за корректный русский текст без «кракозябр», а строка с viewport делает страницу читаемой на телефоне. Тег title это заголовок вкладки в браузере. В body лежит то, что видит посетитель: <h1> это главный заголовок, <p> это абзац текста. Каждый парный тег открывается и закрывается: <p> текст </p>.
Понимания, как это устроено, уже достаточно, чтобы начать. На бесплатном эфире сайт собирают за один вечер и показывают, как его выложить.
Посмотреть, как собратьКак добавить оформление на CSS
Голый HTML выглядит скучно: чёрный текст на белом фоне. За цвета, шрифты, отступы и расположение блоков отвечает CSS. Подключить его можно двумя способами.
- Прямо в странице: внутри head добавьте блок со стилями и опишите оформление там же. Быстро для одной маленькой страницы.
- Отдельным файлом
style.cssрядом сindex.html, а в head поставьте ссылку на него. Так удобнее, когда страниц несколько: стиль правится в одном месте.
Чтобы подключить внешний файл, в head добавляют строку <link rel="stylesheet" href="style.css">, а в самом style.css пишут правила, например body { font-family: sans-serif; color: #333; }. CSS большой, но начинать можно с пары свойств: цвет текста, шрифт, отступы, и постепенно добавлять остальное.
По теме: Как сделать сайт-визитку в 2026: три способа и готовый промпт
Как открыть и как опубликовать сайт
Пока файл лежит у вас на компьютере, его видите только вы. Чтобы просто посмотреть результат, дважды кликните по index.html: он откроется в браузере как обычная страница. Это удобно для проверки, но по такому «адресу» из интернета сайт недоступен.
Чтобы страницу увидели другие, её нужно разместить на хостинге. Для статичного HTML есть бесплатный вариант, GitHub Pages: он публикует сайт прямо из вашего репозитория на GitHub и выдаёт адрес вида username.github.io (документация GitHub Pages).
- Заведите бесплатный аккаунт на github.com и создайте новый публичный репозиторий (для бесплатного плана исходники должны быть в публичном репозитории).
- Загрузите туда файлы сайта через «Add file → Upload files»: как минимум
index.html, а такжеstyle.cssи картинки, если они есть. - Откройте Settings → Pages, в разделе Build and deployment выберите ветку (обычно main) и папку (корень /) и сохраните.
- Подождите пару минут: сайт станет доступен по адресу https://username.github.io или https://username.github.io/имя-репозитория.
У бесплатного GitHub Pages есть ограничения: это только статичные сайты (без серверного кода и базы данных), репозиторий на бесплатном плане публичный, а на размер и трафик действуют мягкие лимиты (около 1 ГБ на репозиторий и 100 ГБ трафика в месяц). Для визитки, портфолио или лендинга этого с запасом хватает.
Один собранный сайт учит больше десяти инструкций, потому что ошибки видны сразу. На бесплатном эфире по вайбкодингу показывают, как описать идею словами и получить работающую страницу, а участникам достаётся гайд.
Собрать сайт с ИИПлюсы и минусы ручного HTML
Писать сайт вручную полезно, но подходит не для всего. Честный расклад:
- Плюсы: полный контроль над каждым элементом, ничего лишнего в коде, страница грузится быстро, публикация бесплатна, и вы реально понимаете, как устроен веб.
- Минусы: всё делается руками, поэтому долго; на сайте из многих страниц придётся копировать общие куски; дизайн с нуля отнимает время; динамику (обратную связь с сохранением, каталог, авторизацию) чистый HTML не даёт.
По теме: Как сделать сайт меньше в 2026: вес страницы и скорость загрузки
Современный путь: страницу можно сгенерировать ИИ
Сегодня HTML-страницу необязательно печатать по буквам. Вы описываете обычными словами, что нужно, а ИИ пишет готовый index.html вместе с CSS. Это и есть вайбкодинг: вместо синтаксиса вы формулируете задачу на русском. Подробно этот способ мы разобрали в статье про то, как собрать сайт вайбкодингом, а на конкретном инструменте, в гайде как сделать сайт с помощью Claude.
Промпт может быть простым: «Сделай одностраничный сайт-визитку фотографа на HTML и CSS: шапка с именем, блок «Обо мне», галерея из шести фото и кнопка «Написать». Верни готовый index.html». В ответ вы получите рабочий файл, который останется загрузить на тот же GitHub Pages. А базовое понимание HTML из этой статьи пригодится, чтобы прочитать, что сгенерировал ИИ, и точечно поправить: сменить текст, цвет или порядок блоков.
Начните с ручной страницы из десяти строк: так вы навсегда запомните, что такое теги и структура. А дальше отдавайте рутину ИИ, а сами проверяйте и правите. Это быстрее, чем печатать всё вручную, и надёжнее, чем слепо копировать чужой код.
Если код вам вообще не хочется трогать, есть и путь совсем без него: визуальные конструкторы. Их плюсы и минусы мы сравнивали в обзоре сайтов без программирования, а общий разбор всех способов собран в статье как сделать сайт самому с нуля.
Частые вопросы
Нужно ли платить за сайт на HTML?
Сам HTML и CSS бесплатны, а базовый хостинг на GitHub Pages тоже бесплатный. Заплатить придётся только за красивый адрес (свой домен вместо username.github.io), и то по желанию.
В какой программе писать HTML?
Подойдёт любой текстовый редактор, даже «Блокнот». Удобнее в бесплатных редакторах кода вроде VS Code или Notepad++: они подсвечивают теги и подсказывают ошибки. А можно вообще не открывать редактор и попросить готовую страницу у ИИ.
Обязательно ли учить HTML, если есть ИИ?
Знать язык наизусть не нужно. Но базу (теги, структуру, что такое head и body) стоит понимать, чтобы читать сгенерированный код и вносить правки, не переписывая всё заново.
Чем HTML отличается от конструктора сайтов?
В конструкторе вы собираете страницу мышкой из готовых блоков, но зависите от его возможностей и тарифов. Ручной HTML даёт полный контроль и бесплатную публикацию, но требует времени. ИИ-генерация занимает середину: контроль как в коде, а скорость почти как в конструкторе.
Хотите не просто сделать страницу, а собирать сайты с ИИ и брать на этом заказы? На бесплатном воркшопе «Сайты с ИИ» покажем весь путь от идеи до опубликованного сайта.
Занять место