Основы разметки: каркас веб-страницы

Иван Корнев·26.05.2026·⏱3 мин

Базовая структура HTML-документа состоит из объявления типа <!doctype html>, корневого элемента <html>, служебного блока <head> для метаданных и контейнера <body> для видимого контента. Такое разделение позволяет браузеру корректно обрабатывать настройки страницы (кодировку, заголовок вкладки, стили) отдельно от того, что непосредственно видит пользователь на экране.

Минимальный рабочий шаблон

Для создания современной веб-страницы достаточно следующего кода. Это «скелет», который гарантирует правильное отображение текста и адаптивность на мобильных устройствах.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Заголовок страницы</title>
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Здесь находится видимый контент.</p>
</body>
</html>

Почему это минимум? Отсутствие <!doctype html> может переключить браузер в режим совместимости (quirks mode), что сломает вёрстку. Отсутствие charset приведёт к «кракозябрам» вместо русских букв, а без viewport сайт будет выглядеть на телефоне как уменьшенная версия десктопной страницы.

Назначение тега head

Элемент <head> содержит метаинформацию о документе. Содержимое этого блока не отображается напрямую на странице (за исключением содержимого тега <title>, которое видно во вкладке браузера).

Ключевые элементы внутри <head>:

<title> — название страницы. Отображается во вкладке браузера и является главным заголовком в результатах поисковой выдачи.
<meta charset="UTF-8"> — указывает кодировку документа. UTF-8 поддерживает большинство языков мира, включая кириллицу.
<meta name="viewport"> — управляет масштабированием на мобильных устройствах.
<link> — подключает внешние ресурсы, чаще всего CSS-стили (rel="stylesheet") или фавикон (rel="icon").
<script> — может содержать или подключать JavaScript-код. Хотя скрипты часто размещают перед закрывающим тегом </body>, их можно использовать и в <head> (особенно с атрибутом defer).
<meta name="description"> — краткое описание страницы для сниппета в поисковиках.

Размещайте подключение CSS-файлов в <head>. Это позволяет браузеру начать отрисовку стилей до того, как пользователь увидит контент, избегая эффекта «мигания» нестилизованной страницы.

Назначение тега body

Тег <body> представляет собой контейнер для всего содержимого документа, которое видит пользователь: текст, изображения, видео, кнопки, формы и навигационные меню. В одном HTML-документе может быть только один элемент <body>.

Именно внутри <body> располагается семантическая структура сайта:

<header> — шапка сайта или раздела.
<nav> — навигационное меню.
<main> — основное уникальное содержание страницы.
<article> и <section> — смысловые блоки.
<footer> — подвал сайта.

Важно понимать разницу между <body> и <main>: <body> оборачивает абсолютно всё видимое (включая шапку и подвал), а <main> выделяет только центральную, уникальную часть контента, не повторяющуюся на других страницах.

Сравнение head и body

Чтобы избежать путаницы, используйте эту шпаргалку при верстке:

Характеристика	`<head>`	`<body>`
Видимость	Невидим для пользователя (кроме title/favicon)	Полностью видим на странице
Цель	Настройка документа для браузера и роботов	Представление информации человеку
Типичное содержимое	Meta-теги, title, ссылки на CSS/JS, favicon	Текст, картинки, ссылки, кнопки, таблицы
Количество на странице	Строго один	Строго один

Частые ошибки новичков

Даже в простом коде легко допустить ошибки, которые влияют на отображение или SEO.

Забытый <!doctype html>. Браузер начинает гадать, как рендерить страницу, что приводит к непредсказуемым отступам и размерам блоков.
Контент внутри <head>. Если случайно написать текст или поставить тег <h1> внутри <head>, браузер попытается «исправить» ошибку, вынеся этот контент в <body>, но структура документа станет невалидной.
Отсутствие атрибута lang. Указание языка (<html lang="ru">) помогает браузерам предлагать правильный перевод и скринридерам корректно произносить текст.
Дублирование <body> или <head>. Валидный документ должен содержать по одному экземпляру этих тегов.

FAQ

Можно ли писать стили прямо в HTML? Да, с помощью тега <style> внутри <head> или атрибута style у конкретных элементов. Однако для поддержки и чистоты кода рекомендуется выносить все стили в отдельные .css файлы.

Где лучше подключать JavaScript: в head или body? Современный стандарт — подключать скрипты в <head> с атрибутом defer (например, <script src="app.js" defer></script>). Это позволяет браузеру загружать код параллельно с разбором HTML, но выполнять его только после полной готовности DOM-дерева.

Обязателен ли закрывающий тег </html>? Технически браузер поймёт страницу и без него, так как конец файла означает конец документа. Однако хорошим тоном считается всегда закрывать все теги явно для читаемости и валидности кода.