Шаблон HTML: 6 готовых каркасов страниц для разных типов сайтов

Шаблон HTML — это готовый каркас страницы: служебный блок <head>, шапка, основная часть и подвал, в которые вы подставляете свой текст. Ниже шесть таких каркасов под разные типы сайтов: базовая страница, лендинг, сайт компании, блог, каталог магазина и портфолио. Каждый прошёл валидатор W3C без единой ошибки, код можно копировать целиком.

Если нужен готовый дизайн с картинками и анимацией, в конце есть таблица площадок, где шаблоны сайтов на HTML скачивают бесплатно. Как устроен сам язык разметки, разобрано в статье «Что такое HTML».

CheckroiПодборка курсов по HTML207 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Базовый шаблон HTML-страницы

С этого кода начинается любая страница, от визитки до интернет-магазина. Сохраните его в файл index.html и откройте в браузере: как это сделать на Windows и macOS, показано в инструкции «Как создать HTML-файл».

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Название страницы</title>
  <meta name="description" content="Одно предложение о странице для поисковика">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <a href="/">Логотип</a>
    <nav>
      <a href="/uslugi/">Услуги</a>
      <a href="/kontakty/">Контакты</a>
    </nav>
  </header>
  <main>
    <h1>Главный заголовок страницы</h1>
    <p>Основной текст.</p>
  </main>
  <footer>
    <p>© Название компании</p>
  </footer>
</body>
</html>

Что делает каждая часть:

• <!DOCTYPE html> включает стандартный режим отображения. Без этой строки проверка W3C выдаёт ошибку.
• lang="ru" сообщает браузеру и экранным дикторам язык страницы. Если его не указать, проверка покажет предупреждение.
• <meta charset="utf-8"> нужен, чтобы кириллица не превратилась в кракозябры.
• viewport отвечает за ширину на телефоне. Без него мобильный браузер покажет уменьшенную копию десктопа.
• <header>, <main> и <footer> делят страницу на шапку, содержимое и подвал. Подробнее эти теги разобраны в статье про HTML5.

Остальные шаблоны собраны на этом же каркасе: отличаются содержимое <body> и заголовок вкладки.

Шаблоны под разные типы сайтов

Каждый каркас ниже валиден и готов к копированию. Выберите тип, похожий на ваш сайт, и замените тексты.

Лендинг

Лендинг делают под одно действие: записаться, купить, оставить телефон. Поэтому в шаблоне всего четыре блока: первый экран с обещанием, выгоды, отзыв и форма. Кнопки в шапке и на первом экране ведут к форме по якорю #zayavka.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Курс английского за 3 месяца</title>
</head>
<body>
  <header>
    <a href="#top">Логотип</a>
    <a href="#zayavka">Записаться</a>
  </header>
  <main id="top">
    <section>
      <h1>Заговорите по-английски за 3 месяца</h1>
      <p>Занятия с преподавателем два раза в неделю.</p>
      <a href="#zayavka">Оставить заявку</a>
    </section>
    <section>
      <h2>Что вы получите</h2>
      <ul>
        <li>24 урока в мини-группе</li>
        <li>Разговорный клуб по субботам</li>
        <li>Сертификат в конце курса</li>
      </ul>
    </section>
    <section>
      <h2>Отзывы</h2>
      <blockquote>
        <p>Через два месяца спокойно говорю на созвонах.</p>
        <footer>Анна, менеджер</footer>
      </blockquote>
    </section>
    <section id="zayavka">
      <h2>Запишитесь на пробный урок</h2>
      <form action="/send/" method="post">
        <label for="name">Имя</label>
        <input id="name" name="name" required>
        <label for="phone">Телефон</label>
        <input id="phone" name="phone" type="tel" required>
        <button type="submit">Отправить</button>
      </form>
    </section>
  </main>
</body>
</html>

Форма отправляет данные методом post на адрес /send/. Его нужно заменить на обработчик вашего сервера или сервиса форм. Атрибут required не даст отправить пустые поля.

Чем лендинг отличается от визитки и многостраничного сайта и что выбрать под бизнес, разобрано в материале «Лендинг, сайт-визитка или многостраничный сайт».

Сайт компании

У корпоративного сайта несколько разделов, поэтому главное в шаблоне меню навигации. Пункты собраны списком внутри <nav>: так меню читается как перечень ссылок, и его проще оформить стилями. Подпись aria-label отличает главное меню от второстепенных, если их на странице несколько.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ООО «Пример» — ремонт офисов</title>
</head>
<body>
  <header>
    <a href="/">ООО «Пример»</a>
    <nav aria-label="Главное меню">
      <ul>
        <li><a href="/o-kompanii/">О компании</a></li>
        <li><a href="/uslugi/">Услуги</a></li>
        <li><a href="/proekty/">Проекты</a></li>
        <li><a href="/kontakty/">Контакты</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Ремонт офисов под ключ</h1>
    <section>
      <h2>Услуги</h2>
      <article>
        <h3>Дизайн-проект</h3>
        <p>Планировка и смета за 10 дней.</p>
      </article>
      <article>
        <h3>Отделка</h3>
        <p>Работаем без остановки офиса.</p>
      </article>
    </section>
    <section>
      <h2>Контакты</h2>
      <address>
        Москва, ул. Примерная, 1<br>
        <a href="tel:+74950000000">+7 495 000-00-00</a>
      </address>
    </section>
  </main>
  <footer>
    <p>© ООО «Пример»</p>
  </footer>
</body>
</html>

На что обратить внимание:

1. Каждая услуга обёрнута в <article> со своим заголовком третьего уровня. Карточку можно скопировать столько раз, сколько у вас услуг.
2. Тег <address> предназначен для контактных данных человека или организации. Телефон оформлен ссылкой tel:, на смартфоне по нажатию откроется набор номера.
3. Ссылки меню заканчиваются слешем, например /uslugi/. Как устроены адреса и атрибуты ссылок, описано в статье «Как сделать ссылку в HTML».

Блог и страница статьи

На странице блога одна статья, поэтому текст обёрнут в <article>. Внутри у статьи своя шапка с заголовком, автором и датой. Дата записана тегом <time>: в атрибуте datetime стоит машиночитаемый формат, а между тегами стоит дата для читателя.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Как выбрать велосипед — блог</title>
</head>
<body>
  <header>
    <a href="/">Блог о велосипедах</a>
  </header>
  <main>
    <article>
      <header>
        <h1>Как выбрать велосипед</h1>
        <p>Автор: Иван · <time datetime="2026-11-03">3 ноября 2026</time></p>
      </header>
      <p>Вступление статьи.</p>
      <h2>Размер рамы</h2>
      <p>Текст раздела.</p>
      <figure>
        <img src="rama.jpg" alt="Таблица размеров рамы" width="800" height="450">
        <figcaption>Размер рамы по росту</figcaption>
      </figure>
    </article>
    <aside>
      <h2>Похожие статьи</h2>
      <ul>
        <li><a href="/blog/shiny/">Как выбрать шины</a></li>
      </ul>
    </aside>
  </main>
  <footer>
    <p>© Блог о велосипедах</p>
  </footer>
</body>
</html>

Картинка с подписью собрана из <figure> и <figcaption>. У <img> обязательно есть alt: без него проверка разметки выдаёт ошибку, а незрячий читатель не узнает, что на снимке. Размеры width и height браузер использует, чтобы заранее оставить место под картинку, и текст при загрузке не прыгает. Все атрибуты тега разобраны в инструкции «Как вставить картинку в HTML».

В блок <aside> кладут то, что связано со статьёй, но не входит в неё: похожие материалы, рубрики, подписку.

Каталог интернет-магазина

Каталог состоит из одинаковых карточек товаров, поэтому они лежат в списке <ul>, а каждая карточка становится пунктом <li>. В шапке добавлена форма поиска с role="search" и ссылка на корзину.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Кроссовки — каталог магазина</title>
</head>
<body>
  <header>
    <a href="/">Магазин</a>
    <form action="/search/" role="search">
      <input type="search" name="q" aria-label="Поиск по каталогу">
      <button type="submit">Найти</button>
    </form>
    <a href="/cart/">Корзина (0)</a>
  </header>
  <main>
    <h1>Кроссовки</h1>
    <ul class="catalog">
      <li class="card">
        <img src="model-1.jpg" alt="Беговые кроссовки, вид сбоку" width="300" height="300">
        <h2><a href="/product/model-1/">Беговые кроссовки</a></h2>
        <p class="price"><data value="5990">5 990 ₽</data></p>
        <button type="button">В корзину</button>
      </li>
      <li class="card">
        <img src="model-2.jpg" alt="Кеды из замши" width="300" height="300">
        <h2><a href="/product/model-2/">Кеды из замши</a></h2>
        <p class="price"><data value="4490">4 490 ₽</data></p>
        <button type="button">В корзину</button>
      </li>
    </ul>
  </main>
</body>
</html>

Цена завёрнута в тег <data>: читатель видит «5 990 ₽», а в атрибуте value лежит число 5990 без пробелов и знака рубля. Его удобно брать скриптом, например для сортировки или подсчёта суммы корзины.

Кнопка «В корзину» стоит с type="button": сама по себе она ничего не отправляет, действие ей назначают на JavaScript. Как ещё оформляют кнопки, показано в статье «Как сделать кнопку в HTML».

Портфолио

В портфолио фотографа, дизайнера или иллюстратора главное сами работы. Шаблон короткий: имя и специализация в шапке, галерея из <figure> и два коротких раздела.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Мария Смирнова — фотограф</title>
</head>
<body>
  <header>
    <h1>Мария Смирнова</h1>
    <p>Фотограф: портреты и свадьбы</p>
  </header>
  <main>
    <section>
      <h2>Работы</h2>
      <figure>
        <img src="portret-1.jpg" alt="Портрет в студии" width="600" height="800">
        <figcaption>Студийный портрет</figcaption>
      </figure>
      <figure>
        <img src="svadba-1.jpg" alt="Свадебная съёмка в парке" width="600" height="800">
        <figcaption>Свадьба в парке</figcaption>
      </figure>
    </section>
    <section>
      <h2>Обо мне</h2>
      <p>Снимаю восемь лет.</p>
    </section>
    <section>
      <h2>Связаться</h2>
      <p><a href="mailto:hello@example.com">hello@example.com</a></p>
    </section>
  </main>
</body>
</html>

Здесь <h1> стоит в шапке: на странице портфолио главный заголовок совпадает с именем автора. Почту для связи оформите ссылкой mailto:, по клику откроется почтовая программа.

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

CheckroiПодборка курсов по CSS181 курс • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Общие стили для всех шаблонов

Без CSS любой из шаблонов выглядит как документ из девяностых: текст во всю ширину экрана, синие подчёркнутые ссылки. Ниже один файл стилей на все шесть каркасов. Сохраните его рядом с HTML под именем style.css: в базовом шаблоне он уже подключён строкой <link rel="stylesheet" href="style.css">.

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.5; color: #222; }
header, main, footer { max-width: 960px; margin: 0 auto; padding: 16px; }
header { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
nav ul, .catalog { list-style: none; margin: 0; padding: 0; }
nav ul { display: flex; gap: 16px; }
section { padding: 24px 0; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: 12px; }
img { max-width: 100%; height: auto; background: #eee; }
form { display: grid; gap: 8px; max-width: 360px; }
form[role="search"] { display: flex; max-width: none; }
input, button { font: inherit; padding: 8px 12px; }
@media (max-width: 600px) {
  header { flex-direction: column; align-items: flex-start; }
  nav ul { flex-direction: column; gap: 8px; }
}

Что делают правила:

• Шапка, содержимое и подвал не шире 960 пикселей и стоят по центру.
• Каталог товаров выстроен сеткой grid: карточки сами переносятся на новую строку, когда им не хватает места.
• На экранах уже 600 пикселей шапка и меню складываются в столбик. За это отвечает медиазапрос в конце файла.

Файл проверен валидатором CSS от W3C: ошибок и предупреждений нет. Другие способы подключить стили описаны в статье «Как подключить CSS к HTML».

Где скачать готовые HTML-шаблоны бесплатно

Каркас выше даёт структуру, но не дизайн. Если нужен сайт, который сразу выглядит готовым, проще взять шаблон с одной из площадок ниже и заменить в нём тексты и картинки.

Как мы отбирали площадки

Мы разобрали 12 площадок с HTML-шаблонами и оставили восемь. Критерии такие:

• шаблон можно открыть в демо до скачивания;
• условия использования опубликованы на самой площадке, а у открытых проектов лежат в файле лицензии;
• в шаблоне чистый HTML и CSS или Bootstrap, а не тема под конкретную CMS.

Не вошёл Colorlib: шаблоны там теперь продаются с лицензией на число сайтов, бесплатны только сниппеты. Ещё у трёх площадок мы не смогли открыть условия использования. Сайты онлайн-школ и учебные справочники в таблицу не брали: шаблоны там служат примерами к урокам.

У первой площадки в таблице есть условие, которое легко пропустить. Лицензия CC BY 3.0 разрешает коммерческое использование, но требует указать автора дизайна. Если заказчик против такого упоминания, у автора есть платный вариант Pixelarity без этого условия.

Как переделать скачанный шаблон под себя

1. Откройте архив и найдите index.html, папку со стилями (css или assets) и папку с картинками.
2. Поменяйте <title>, description и lang: в зарубежных шаблонах там стоит английский.
3. Замените тексты и картинки. Фото из демо бывают только для просмотра, права на них проверяйте отдельно.
4. Удалите лишние блоки целиком, вместе с открывающим и закрывающим тегом.
5. Прогоните страницу через проверку разметки W3C и откройте её на телефоне.

Цвета и шрифты меняются в CSS-файле шаблона, HTML для этого трогать не нужно. Обычно это переменные в начале файла или правила для body и заголовков.

Частые ошибки в HTML-шаблонах

Вот как валидатор W3C реагирует на типовые промахи в шаблонах. Текст сообщения дан так, как он выводит его на английском:

А вот блок <div> внутри ссылки <a> проверка пропустила без замечаний: в HTML5 так делать можно, и всю карточку товара разрешено сделать одной ссылкой.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 800 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Где освоить HTML и вёрстку системно

Шаблон закрывает задачу «нужна страница к вечеру». Чтобы собирать сайты по макету дизайнера, придётся разобраться в сетках, адаптивной вёрстке и JavaScript. Чем занимается верстальщик и сколько он получает, мы описали в статье о профессии HTML-верстальщика, а курсы по HTML собраны ниже.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	36 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям36 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по HTML