HTML-код сайта: 5 примеров от пустой страницы до формы и мобильной версии

HTML-код сайта — это текстовый файл с тегами: браузер читает их сверху вниз и рисует страницу. Самый короткий рабочий вариант занимает одиннадцать строк. В нём объявление <!DOCTYPE html>, блок <head> с кодировкой и названием вкладки и блок <body> с тем, что увидит посетитель.

Ниже пять примеров по нарастающей: каркас, страница-визитка, сайт из трёх страниц со стилями и меню, форма обратной связи и версия для телефона. Каждый можно скопировать в файл index.html и открыть в браузере. Как создать такой файл в Блокноте или VS Code, показано в инструкции про HTML-файл.

Если язык пока совсем незнаком, начните со статьи что такое HTML и где он используется, а сюда возвращайтесь за кодом.

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

Минимальный HTML-код страницы

С этого каркаса начинается любая страница, от лендинга до интернет-магазина. Скопируйте его целиком:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Привет, это моя страница</h1>
  <p>Здесь будет текст о том, чем я занимаюсь.</p>
</body>
</html>

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

• <!DOCTYPE html> включает стандартный режим отображения. Без него браузер уходит в режим совместимости и подражает старым Navigator 4 и Internet Explorer 5, так написано в справочнике MDN о режимах отображения.
• <html lang="ru"> указывает язык содержимого страницы.
• <meta charset="utf-8"> задаёт кодировку. По описанию тега meta на MDN, он должен стоять в первых 1024 байтах страницы: некоторые браузеры смотрят только эти байты, прежде чем выбрать кодировку.
• <title> даёт текст, который появится на вкладке браузера.
• Всё, что видит посетитель, лежит внутри <body>.

Сохраните файл в кодировке UTF-8 и откройте двойным щелчком. Получится белая страница с заголовком и одним абзацем:

Почему тег называется <!DOCTYPE html> без номера версии и чем этот стандарт отличается от прежнего, разобрано в статье про HTML5.

Страница-визитка с фото, списком и ссылкой

Теперь наполним <body>. Визитка подходит для первого проекта лучше всего: имя, строка о себе, фото, список услуг и способ связаться.

<!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>
    <img src="photo.jpg" alt="Мария за рабочим столом" width="320" height="240">
    <h2>Что я делаю</h2>
    <ul>
      <li>иллюстрации для книг</li>
      <li>рисунки для упаковки</li>
      <li>открытки и стикеры</li>
    </ul>
    <h2>Как со мной связаться</h2>
    <p>Пишите на <a href="mailto:hello@example.com">hello@example.com</a></p>
  </main>
  <footer>
    <p>© Мария Ковалёва</p>
  </footer>
</body>
</html>

В этом коде появились три новых приёма.

1. Смысловые блоки. Теги <header>, <main> и <footer> делят страницу на шапку, основную часть и подвал. Внешне они ничего не меняют, зато код проще читать, а стили потом удобно привязывать к понятным блокам.
2. Картинка. У <img> есть путь к файлу в src и описание в alt. MDN напоминает, что браузер показывает картинку не всегда, и тогда вместо неё остаётся этот текст. Пути и остальные атрибуты собраны в инструкции, как вставить картинку в HTML.
3. Ссылка на почту. Адрес в href начинается с mailto:, и по щелчку открывается почтовая программа. Другие виды ссылок есть в разборе тега a.

Услуги перечислены тегами <ul> и <li>. Нумерованные и вложенные варианты описаны в статье про списки в HTML.

В браузере визитка выглядит так. Шрифт и отступы пока браузерные, потому что стилей ещё нет:

Сайт из трёх страниц с общими стилями

Одной страницы быстро становится мало. Добавим ещё две и общее меню, а оформление вынесем в отдельный файл, чтобы не копировать его трижды.

Файлы раскладываются так:

Имена файлов пишите латиницей, строчными буквами и без пробелов. Многие веб-серверы различают регистр: если картинка лежит как MyImage.jpg, а в коде написано myimage.jpg, она может не загрузиться. Об этом предупреждает учебник MDN по работе с файлами.

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

Код главной страницы

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Мария Ковалёва — иллюстратор</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <nav>
      <a href="index.html">Главная</a>
      <a href="portfolio.html">Работы</a>
      <a href="contacts.html">Контакты</a>
    </nav>
    <h1>Мария Ковалёва</h1>
  </header>
  <main>
    <h2>Услуги и цены</h2>
    <table>
      <tr><th>Услуга</th><th>Срок</th><th>Цена</th></tr>
      <tr><td>Обложка книги</td><td>10 дней</td><td>25 000 ₽</td></tr>
      <tr><td>Набор стикеров</td><td>5 дней</td><td>8 000 ₽</td></tr>
    </table>
  </main>
  <footer>
    <p>© Мария Ковалёва</p>
  </footer>
</body>
</html>

Строка <link rel="stylesheet" href="css/style.css"> подключает стили. Путь относительный: от папки с HTML-файлом в подпапку css. Другие способы и ошибки с путями собраны в инструкции как подключить CSS к HTML.

Таблица услуг строится из строк <tr>, внутри которых заголовки <th> и ячейки <td>. Как объединять ячейки, показано в статье про таблицы в HTML.

Файл стилей для всех страниц

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #222;
}
header, main, footer {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}
nav a {
  margin-right: 16px;
  color: #c0392b;
}
table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid #ccc;
  padding: 6px 12px;
}
@media (max-width: 600px) {
  nav a {
    display: block;
    margin-bottom: 8px;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

Пара max-width: 800px и margin: 0 auto ставит содержимое по центру и не даёт строкам растянуться на весь широкий монитор. Правило border-collapse: collapse склеивает двойные рамки таблицы в одинарные.

Меню <nav> копируется на все три страницы без изменений. Ссылки ведут на соседние файлы, поэтому сайт работает и с диска, и на хостинге:

Форма обратной связи на странице контактов

Страница contacts.html отличается от главной только содержимым <main>. Шапку и меню оставьте как есть, а в основную часть поставьте форму:

<main>
  <form action="https://example.com/send" method="post">
    <p>
      <label for="name">Имя</label><br>
      <input type="text" id="name" name="name" required>
    </p>
    <p>
      <label for="email">Почта</label><br>
      <input type="email" id="email" name="email" required>
    </p>
    <p>
      <label for="message">Сообщение</label><br>
      <textarea id="message" name="message" rows="5"></textarea>
    </p>
    <button type="submit">Отправить</button>
  </form>
</main>

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

• Подпись связана с полем. Значение for у <label> совпадает с id поля, как в примере на MDN. Щелчок по слову «Почта» ставит курсор в поле почты.
• Тип email. С type="email" браузер сам проверяет, похоже ли значение на адрес. Если ввести «ivan» без собачки, Chrome не отправит форму и покажет подсказку. Правила проверки описаны в справочнике MDN по полю email (на английском).
• Обязательные поля. Атрибут required не пускает форму, пока поле пустое.
• Адрес отправки. В action стоит адрес, куда уйдут данные. HTML умеет только собрать их и отправить. Принимает сообщение и пересылает его вам на почту уже сервер: скрипт на хостинге или сервис приёма форм. Отправку формы без перезагрузки страницы делают на JavaScript, его учат следующим шагом на пути во фронтенд-разработку.

Пока action ведёт на заглушку example.com, данные никуда не дойдут. Для учебного проекта этого хватит: подписи, проверку полей и кнопку можно отладить и без сервера.

Кнопку можно сделать и ссылкой, и полем <input>, варианты собраны в статье как сделать кнопку в HTML.

Версия для телефона: viewport и медиазапрос

Откройте страницу без строки viewport на смартфоне, и текст окажется мелким, как на уменьшенной копии монитора. Документация MDN объясняет почему: мобильный браузер рисует такую страницу в виртуальном окне шире экрана, например в 980 пикселей, а потом сжимает результат.

Исправляют это две вещи:

1. Тег viewport в head. Строка <meta name="viewport" content="width=device-width, initial-scale=1"> велит браузеру взять за ширину страницы ширину экрана. Во всех примерах выше, кроме самого первого, она уже стоит.
2. Медиазапрос в CSS. Блок @media (max-width: 600px) из файла стилей срабатывает на экранах не шире 600 пикселей: ссылки меню встают в столбик, картинки ужимаются по ширине экрана. Синтаксис медиазапросов описан в руководстве MDN.

Когда одна страница подстраивается под любой экран, это называют адаптивной вёрсткой. Какие ещё бывают виды вёрстки, рассказано в статье что такое вёрстка сайтов.

Так главная выглядит на экране шириной 390 пикселей:

Проверять мобильную версию удобно и без телефона. В Chrome откройте инструменты разработчика и включите режим устройства: ширину экрана там можно выбрать из списка или задать вручную. Как это сделать, показано в документации Chrome DevTools.

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

У новичков ошибки обычно повторяются. Сверьтесь с таблицей, прежде чем искать сложную причину:

Остальное найдёт валидатор W3C. Вставьте код в поле для текста и запустите проверку: сервис перечислит ошибки с номерами строк.

Пока ищете ошибку, кусок кода можно закомментировать вместо удаления. Как это сделать, показано в статье про комментарии в HTML. А как посмотреть исходный код готового файла, рассказано в инструкции как открыть HTML-файл на компьютере и телефоне.

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

Что учить после первых страниц

Пять примеров покрывают базу. Дальше обычно идут:

• сетки на Flexbox и Grid вместо блоков, стоящих столбиком;
• шрифты, цвета и отступы из макета дизайнера;
• JavaScript для слайдеров, всплывающих окон и отправки формы без перезагрузки;
• Git и публикация на хостинге.

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

Где освоить HTML системно

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

Ниже курсы по 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