Тег body в HTML - структура страницы и основные возможности

28 января 2026

Автор

Олег Марков

Введение

Тег body в HTML — это корневой контейнер для всего содержимого веб‑страницы, которое видит пользователь в окне браузера. Все, что отображается в области просмотра (текст, изображения, формы, кнопки, таблицы, видео, интерфейсы приложений), находится внутри body.

Смотрите, здесь важно понять базовую мысль: HTML‑документ делится на две крупные части — head и body. Head описывает документ и помогает браузеру и поисковым системам (метаданные, подключения стилей, заголовок вкладки), а body отвечает за фактический интерфейс, с которым вы взаимодействуете.

В этой статье мы подробно разберем:

зачем нужен тег body и где он располагается;
как должна выглядеть правильная структура HTML‑страницы;
какие атрибуты тега body актуальны сегодня, а какие считаются устаревшими;
как работа с body связана с CSS и JavaScript;
как управлять разметкой, событиями и поведением страницы через body.

По ходу статьи я буду показывать примеры и обязательно сопровождать их комментариями, чтобы вам было проще понять, как они работают на практике.

Место тега body в структуре HTML‑документа

Общая структура документа

Давайте начнем с основной схемы HTML‑страницы:

<!DOCTYPE html> <!-- Объявление типа документа HTML5 -->
<html lang="ru"> <!-- Корневой элемент документа -->
<head>
  <meta charset="UTF-8"> <!-- Кодировка документа -->
  <title>Пример страницы</title> <!-- Заголовок вкладки браузера -->
</head>
<body>
  <!-- Все видимое содержимое страницы размещается здесь -->
  <h1>Заголовок страницы</h1>
  <p>Какой-то текст на странице.</p>
</body>
</html>

Ключевые моменты:

тег html — корень документа;
head — служебная часть (метаданные, стили, скрипты, заголовок);
body — визуальная часть (контент и интерфейс).

Браузер ожидает, что тег body будет единственным на странице и будет находиться после head и внутри html.

Что может находиться внутри body

Внутри body может быть любая валидная HTML‑разметка: блочные и строчные элементы, формальные и семантические теги. Сюда относятся:

структурные элементы: header, main, footer, nav, section, article, aside;
содержимое: p, h1–h6, img, video, audio, ul/ol/li, table, form;
интерактивные элементы: button, a, input, textarea, select, dialog;
контейнеры: div, span;
скрипты и шаблоны, связанные с интерфейсом: script, template (когда нужны именно в теле).

Пример базовой структуры внутри body:

<body>
  <header>
    <!-- Шапка сайта -->
    <h1>Мой сайт</h1>
    <nav>
      <!-- Навигационное меню -->
      <a href="/">Главная</a>
      <a href="/about">О нас</a>
    </nav>
  </header>

  <main>
    <!-- Основной контент страницы -->
    <article>
      <h2>Статья о теге body</h2>
      <p>Здесь находится основной текст.</p>
    </article>
  </main>

  <footer>
    <!-- Подвал сайта -->
    <p>© 2025 Мой сайт</p>
  </footer>
</body>

Как видите, body — это логический контейнер для всей структуры интерфейса страницы.

Можно ли опускать тег body

HTML‑спецификация допускает неявное создание тега body, если вы его не укажете. Браузер добавит его сам. Но это работает с важными оговорками:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Страница без явного body</title>
</head>

<!-- Здесь нет <body>, но браузер создаст его автоматически -->
<h1>Заголовок</h1>
<p>Текст страницы.</p>
</html>

Браузер интерпретирует это как:

<html lang="ru">
<head>...</head>
<body>
  <h1>Заголовок</h1>
  <p>Текст страницы.</p>
</body>
</html>

Формально так можно делать, но я не рекомендую полагаться на неявное добавление body:

это ухудшает читаемость кода;
ломает ожидаемую структуру документа;
может приводить к неожиданным эффектам при работе с JavaScript и CSS (например, при поиске элемента body или стилизации всего документа).

На практике всегда явно указывайте тег body — это стандарт де‑факто в промышленной разработке.

Семантика тега body и его роль в браузере

Тег body как корень «видимого» дерева

С точки зрения браузера, body — это корневой узел дерева рендеринга (того, что реально отрисовывается в окне). Элемент html считается более верхним уровнем, но пользовательский интерфейс строится именно на основе содержимого body.

Давайте сформулируем проще:

элементы внутри head не участвуют напрямую в отрисовке страницы (за редкими исключениями, вроде style);
элементы внутри body формируют DOM‑дерево, на котором основана разметка, стили и поведение страницы;
многие CSS‑и JS‑операции начинают именно с body:
- глобальные стили для текста;
- события клавиатуры;
- вычисление высоты страницы;
- отключение прокрутки (через стили body).

Пример: зададим базовые стили на уровне body, чтобы сразу влиять на всю страницу.

<style>
  body {
    /* Базовый шрифт для всего документа */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Цвет текста по умолчанию */
    color: #222;
    /* Цвет фона страницы */
    background-color: #f5f5f5;
    /* Убираем стандартные отступы браузера */
    margin: 0;
  }
</style>
<body>
  <h1>Заголовок</h1>
  <p>Текст будет использовать базовый шрифт и наследуемый цвет.</p>
</body>

Как видите, изменение стилей body автоматически влияет на все дочерние элементы (благодаря наследованию CSS‑свойств).

Связь body и глобальных событий

Многие важные события браузера происходят на уровне окна (window) или документа (document), но имеют прямое отношение к содержимому body:

загрузка документа;
изменение размеров окна;
прокрутка страницы;
фокус и взаимодействие с формами.

Через JavaScript body часто используют как удобную точку входа для работы с интерфейсом:

<body>
  <button id="toggleColor">Поменять фон страницы</button>

  <script>
    // Находим элемент body
    const bodyElement = document.body;

    // Находим кнопку по id
    const button = document.getElementById('toggleColor');

    // Вешаем обработчик события клика на кнопку
    button.addEventListener('click', function () {
      // Переключаем фон body между двумя цветами
      if (bodyElement.style.backgroundColor === 'black') {
        bodyElement.style.backgroundColor = 'white';
        bodyElement.style.color = 'black';
      } else {
        bodyElement.style.backgroundColor = 'black';
        bodyElement.style.color = 'white';
      }
    });
  </script>
</body>

Здесь вы видите, как через document.body можно управлять внешним видом всей страницы.

Атрибуты тега body: актуальные и устаревшие

Актуальные атрибуты

По стандарту HTML5 тег body поддерживает только универсальные атрибуты, которые могут использоваться почти на любом теге:

id — уникальный идентификатор;
class — набор CSS‑классов;
style — встроенные стили;
data-* — пользовательские дата‑атрибуты;
атрибуты событий (onload, onclick и другие) — формально допустимы, но в современном коде почти не используются, о них поговорим отдельно.

Атрибут id у body

Используется редко, но может пригодиться в специфических сценариях (например, для интеграции с какими‑то внешними системами или якорями).

<body id="main-body">
  <!-- Контент страницы -->
</body>

В JavaScript id часто не нужен, потому что body легко получить через document.body.

Атрибут class у body

А вот class — один из самых полезных атрибутов для body. Через него удобно:

переключать темы (светлая/темная);
обозначать тип страницы (например, главная, страница профиля, страница ошибки);
управлять глобальными стилями в зависимости от состояния приложения.

Давайте разберемся на примере переключения темы.

<head>
  <style>
    /* Базовый стиль для страницы в светлой теме */
    body.theme-light {
      background-color: #ffffff;
      color: #222222;
    }

    /* Стиль для темной темы */
    body.theme-dark {
      background-color: #111111;
      color: #f5f5f5;
    }
  </style>
</head>
<body class="theme-light">
  <button id="switchTheme">Переключить тему</button>

  <script>
    const bodyElement = document.body;
    const button = document.getElementById('switchTheme');

    button.addEventListener('click', function () {
      // Если сейчас стоит класс theme-light, переключаем на theme-dark
      if (bodyElement.classList.contains('theme-light')) {
        bodyElement.classList.remove('theme-light');
        bodyElement.classList.add('theme-dark');
      } else {
        // И наоборот - если стоит theme-dark, включаем theme-light
        bodyElement.classList.remove('theme-dark');
        bodyElement.classList.add('theme-light');
      }
    });
  </script>
</body>

Здесь я показываю, как смена одного класса на body позволяет менять дизайн всей страницы без изменения отдельных элементов.

Атрибут style у body

Встроенные стили на уровне body лучше использовать умеренно, но иногда они удобны для быстрых прототипов или встраиваемых виджетов.

<body style="margin: 0; background-color: #fafafa;">
  <!-- Контент -->
</body>

На продакшене стили для body обычно выносят во внешний CSS.

data-* атрибуты у body

Через data‑атрибуты можно хранить конфигурацию для JavaScript. Это часто используется в SPA и виджетах.

<body data-theme="light" data-user-role="admin">
  <!-- Контент -->
  <script>
    // Получаем data-атрибуты с body
    const body = document.body;
    const theme = body.dataset.theme; // здесь будет строка "light"
    const role = body.dataset.userRole; // здесь будет строка "admin"

    // На основании этих данных можно настраивать поведение страницы
  </script>
</body>

Здесь вы видите, как body становится удобным «носителем» глобальных настроек.

Устаревшие атрибуты (HTML4)

Раньше тег body часто использовали для оформления страницы без CSS: задавали цвета, фоновое изображение, отступы. В HTML4 были популярны атрибуты:

bgcolor — цвет фона страницы;
text — цвет текста;
link — цвет ссылок;
vlink — цвет посещенных ссылок;
alink — цвет активной ссылки;
background — фоновое изображение для страницы;
leftmargin, topmargin, marginwidth, marginheight — отступы от краев окна.

Смотрите, я покажу вам, как это выглядело раньше:

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080">
  <a href="#">Ссылка</a>
</body>

Сегодня все эти вещи нужно делать только через CSS. Использование этих атрибутов считается устаревшим (deprecated) и не рекомендуется.

Современный эквивалент:

<head>
  <style>
    body {
      /* Цвет фона страницы */
      background-color: #ffffff;
      /* Цвет текста по умолчанию */
      color: #000000;
    }

    a {
      /* Цвет обычной ссылки */
      color: #0000ff;
    }

    a:visited {
      /* Цвет посещенной ссылки */
      color: #800080;
    }
  </style>
</head>
<body>
  <a href="#">Ссылка</a>
</body>

Такой подход:

лучше поддерживается во всех браузерах;
проще масштабируется;
отделяет структуру (HTML) от представления (CSS).

Атрибуты событий у body

У тега body могут быть inline‑обработчики событий, например:

onload — при загрузке документа;
onunload — при закрытии/перезагрузке;
onresize, onscroll и другие.

Формально вы можете написать:

<body onload="initApp()">
  <!-- Контент -->
  <script>
    function initApp() {
      // Инициализация приложения после загрузки страницы
      console.log('Страница загружена');
    }
  </script>
</body>

Но такой подход считается устаревшим стилем. Сейчас рекомендуют:

отделять разметку от логики;
подключать обработчики через JavaScript.

Современный вариант:

<body>
  <!-- Контент -->
  <script>
    // Ждем, пока DOM будет полностью построен
    document.addEventListener('DOMContentLoaded', function () {
      // Здесь выполняем инициализацию приложения
      console.log('DOM загружен и готов к работе');
    });
  </script>
</body>

Или, если нужно дождаться загрузки ресурсов (картинок, стилей):

<script>
  // Срабатывает, когда все ресурсы загружены
  window.addEventListener('load', function () {
    console.log('Страница и ресурсы полностью загружены');
  });
</script>

Так код становится более управляемым и легче тестируется.

Работа с тегом body через CSS

Базовая стилизация страницы

Чаще всего body используют, чтобы задать:

общий фон страницы;
цвет и базовые параметры текста;
обнуление стандартных отступов браузера;
глобальную сетку или выравнивание.

Простой пример:

<head>
  <style>
    html, body {
      /* Задаем высоту по всей высоте окна для корректной работы флексов и других макетов */
      height: 100%;
    }

    body {
      /* Убираем дефолтные отступы браузера */
      margin: 0;

      /* Базовый шрифт для всего документа */
      font-family: system-ui, sans-serif;

      /* Цвет текста */
      color: #333;

      /* Цвет фона */
      background-color: #f0f2f5;
    }
  </style>
</head>
<body>
  <h1>Пример</h1>
  <p>Текст уже оформлен базовым стилем.</p>
</body>

Обратите внимание на общую практику: html, body часто прописывают вместе, чтобы корректно использовать высоту в 100% и другие свойства макета.

Центрирование контента по вертикали и горизонтали

Через стили body можно быстро сделать центрирование всего содержимого.

<head>
  <style>
    html, body {
      height: 100%; /* Задаем высоту на весь размер окна */
    }

    body {
      margin: 0;
      display: flex; /* Включаем флекс-бокс на уровне body */
      justify-content: center; /* Горизонтальное центрирование */
      align-items: center; /* Вертикальное центрирование */
      background-color: #20232a;
      color: #ffffff;
      font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div>
    <h1>Центрированный блок</h1>
    <p>Этот контент центрирован и по вертикали, и по горизонтали.</p>
  </div>
</body>

Теперь вы увидите, как через несколько CSS‑свойств на body можно сразу задать базовый layout.

Отключение прокрутки через body

Иногда нужно временно запретить прокрутку страницы, например, когда открыто модальное окно.

Обычно это делают так:

<head>
  <style>
    body.modal-open {
      /* Запрещаем прокрутку страницы */
      overflow: hidden;
    }
  </style>
</head>
<body>
  <button id="openModal">Открыть модалку</button>
  <div id="modal" hidden>
    <!-- Содержимое модального окна -->
    <p>Модальное окно</p>
    <button id="closeModal">Закрыть</button>
  </div>

  <script>
    const body = document.body;
    const modal = document.getElementById('modal');
    const openBtn = document.getElementById('openModal');
    const closeBtn = document.getElementById('closeModal');

    openBtn.addEventListener('click', function () {
      // Показываем модальное окно
      modal.hidden = false;
      // Добавляем класс, который отключает прокрутку
      body.classList.add('modal-open');
    });

    closeBtn.addEventListener('click', function () {
      // Скрываем модальное окно
      modal.hidden = true;
      // Включаем прокрутку обратно
      body.classList.remove('modal-open');
    });
  </script>
</body>

Обратите внимание, как добавление одного класса на body управляет поведением всей страницы.

Работа с тегом body через JavaScript

Получение ссылки на body

С этим все просто: браузер предоставляет удобное свойство document.body.

<script>
  // Получаем элемент body
  const bodyElement = document.body;

  // Выводим в консоль, чтобы посмотреть структуру
  console.log(bodyElement); // Здесь будет объект DOM-элемента body
</script>

Кроме document.body есть еще document.documentElement (элемент html). Иногда их путают. Кратко:

document.documentElement — корневой элемент html;
document.body — элемент body, то есть корень «видимого» содержимого.

Добавление динамического контента в body

Через JavaScript вы можете создавать элементы и добавлять их в конец body.

<body>
  <script>
    // Создаем новый параграф
    const p = document.createElement('p');
    // Задаем текст для параграфа
    p.textContent = 'Этот текст добавлен динамически через JavaScript';

    // Добавляем параграф в конец body
    document.body.appendChild(p);
  </script>
</body>

Такой подход полезен для:

уведомлений;
всплывающих сообщений;
динамических виджетов;
элементарных SPA.

Управление классами body

Через свойство classList вы можете управлять классами на body, чтобы переключать состояния интерфейса.

<body class="theme-light">
  <script>
    const body = document.body;

    // Добавляем новый класс
    body.classList.add('user-logged-in');

    // Удаляем класс
    body.classList.remove('theme-light');

    // Переключаем класс
    body.classList.toggle('dark-mode');

    // Проверяем наличие класса
    if (body.classList.contains('dark-mode')) {
      console.log('Темный режим включен');
    }
  </script>
</body>

С помощью этих операций вы можете гибко управлять глобальными стилями и состояниями приложения.

Реакция на события прокрутки и изменения размеров

События, связанные с прокруткой и размерами, «живут» на window, но напрямую связаны с содержимым body.

<body>
  <div style="height: 2000px;">
    <!-- Искусственно увеличиваем высоту страницы -->
    <p>Прокрутите страницу вниз.</p>
  </div>

  <script>
    // Отслеживаем прокрутку окна
    window.addEventListener('scroll', function () {
      // Получаем текущую позицию прокрутки по вертикали
      const scrollY = window.scrollY;
      console.log('Текущая прокрутка по оси Y:', scrollY);
    });

    // Отслеживаем изменение размера окна
    window.addEventListener('resize', function () {
      // Получаем текущую ширину и высоту окна
      const width = window.innerWidth;
      const height = window.innerHeight;
      console.log('Размер окна:', width, 'x', height);
    });
  </script>
</body>

Эти события часто используют, чтобы:

показывать/скрывать «кнопку вверх»;
закреплять шапку (sticky header);
адаптировать интерфейс к размеру окна.

Типичные ошибки и подводные камни при работе с body

Несколько тегов body в одном документе

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

<html>
<head>...</head>
<body>
  <h1>Первая часть</h1>
</body>

<body>
  <p>Вторая часть</p>
</body>
</html>

Браузеры пытаются это исправить и фактически используют только один body, но поведение может быть непредсказуемым.

Рекомендация:

всегда следите, чтобы в документе был ровно один тег body;
если вы вставляете фрагменты HTML (например, компоненты), не включайте в них html, head и body.

Размещение контента вне body

Иногда содержимое случайно попадает:

до открытия тега body;
после закрытия тега html.

Браузер попытается сам «переставить» элементы, но логика может быть нарушена. Корректная структура всегда должна быть такой:

<!DOCTYPE html>
<html lang="ru">
<head>
  <!-- Только метаданные, стили и скрипты -->
</head>
<body>
  <!-- Весь видимый контент только здесь -->
</body>
</html>

Смешивание логики и разметки через события в body

Мы уже говорили про onload и другие inline‑обработчики. Основные проблемы:

ухудшается читаемость;
сложнее отлаживать код;
труднее разделять обязанности между верстальщиками и разработчиками.

Всегда лучше навешивать обработчики через JavaScript, а не через атрибуты тега body.

Чрезмерное количество логики, завязанной на body

Часто в больших приложениях удобно выносить логику в более мелкие компоненты, а не завязывать все на body. Для этого:

используйте контейнеры внутри body (например, div с id="app");
подключайте фреймворки (React, Vue, Angular) в этих контейнерах;
оставляйте body как «обертку» для макета и глобальных стилей.

Пример структуры SPA:

<body>
  <!-- Контейнер приложения -->
  <div id="app">
    <!-- Здесь фреймворк отрисует интерфейс -->
  </div>

  <script>
    // Здесь обычно происходит инициализация приложения на JavaScript
    // Фреймворк монтирует интерфейс в элемент с id="app"
  </script>
</body>

Практические паттерны использования body

Различные классы body для разных типов страниц

В приложениях часто задают класс на body в зависимости от текущего шаблона или раздела сайта.

<body class="page-home">
  <!-- Контент главной страницы -->
</body>

<body class="page-dashboard">
  <!-- Контент личного кабинета -->
</body>

Тогда в CSS вы можете писать:

body.page-home header {
  /* Специальный стиль шапки на главной */
}

body.page-dashboard header {
  /* Другой стиль шапки в кабинете */
}

Так общее оформление задается через общие стили, а body помогает переключать специфические вариации.

Добавление служебных слоев поверх всего контента

Через body удобно добавлять элементы, которые должны быть:

поверх всего интерфейса;
независимы от основной верстки;
доступны из разных частей приложения.

Примеры:

глобальные уведомления (toast);
индикаторы загрузки;
overlay‑слои.

Обычно это делается так:

<body>
  <div id="app">
    <!-- Основное приложение -->
  </div>

  <!-- Глобальный контейнер для уведомлений -->
  <div id="toast-root"></div>

  <!-- Глобальный контейнер для модальных окон -->
  <div id="modal-root"></div>

  <script>
    // Здесь приложение может добавлять элементы в toast-root или modal-root
    // в зависимости от необходимости
  </script>
</body>

Обратите внимание: эти контейнеры логически относятся к интерфейсу, поэтому располагаются внутри body, а не где‑то еще.

Использование body для тематизации (темы, язык, направление)

Хотя направление текста (ltr/rtl) в идеале задается на html, на уровне body можно управлять дополнительными состояниями интерфейса:

классом языка;
режимом высокой контрастности;
крупным шрифтом и т.д.

<body class="lang-ru contrast-high">
  <!-- Интерфейс для русскоязычного пользователя с высокой контрастностью -->
</body>

CSS:

body.contrast-high {
  /* Увеличиваем контраст текста и фона */
  background-color: #000;
  color: #fff;
}

body.lang-ru {
  /* Можно подправить шрифты или отступы под конкретный язык */
}

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

Заключение

Тег body в HTML — это опорная точка всей пользовательской части веб‑страницы. Через него:

задается базовая структура видимого интерфейса;
подключаются глобальные стили и темы;
управляется поведение страницы на уровне JavaScript;
реализуются служебные слои — модальные окна, уведомления, overlay.

Ключевые практические выводы:

всегда явно указывайте один тег body в документе;
используйте body как корневой контейнер всего содержимого, а не только части страницы;
задавайте базовые стили и параметры текста на уровне body;
для переключения тем, состояний и типов страниц используйте классы на body;
избегайте устаревших атрибутов оформления (bgcolor, text и т.п.), заменяйте их на CSS;
не смешивайте разметку и логику: вместо inline‑обработчиков на body используйте JavaScript‑события.

Если вы выстроите работу со страницей вокруг понятной структуры html → head/body и будете аккуратно использовать body как глобальный контейнер, дальнейшая верстка и разработка интерфейса станут гораздо предсказуемее и удобнее.

Частозадаваемые технические вопросы по теме и ответы

Нужно ли всегда явно писать тег body, если браузер и так его добавит

Да, лучше всегда указывать body явно. Это делает структуру документа понятной и предсказуемой, упрощает работу с DOM и стилизацию. Неявный body может вызвать странные эффекты при вставке фрагментов HTML и работе скриптов.

В чем разница между document.body и document.documentElement

document.body — это элемент body, корень видимого содержимого страницы. document.documentElement — элемент html, самый верхний узел документа. При работе с прокруткой и размерами разные браузеры могут использовать и html, и body, поэтому при сложной верстке иногда приходится проверять оба варианта.

Можно ли внутрь body помещать тег script

Да, можно и это обычная практика. Скрипты часто размещают внизу body, чтобы сначала загрузился и отрисовался контент, а уже затем выполнялись скрипты. Так страница воспринимается быстрее и меньше блокируется загрузкой JavaScript.

Можно ли внутри body использовать несколько тегов main или header

По стандарту main должен быть только один на странице. header может встречаться несколько раз (например, в шапке сайта и внутри статьи). Body сам по себе не ограничивает это, но стоит следовать семантическим правилам HTML, чтобы разметка была корректной и понятной для поисковиков и вспомогательных технологий.

Почему часть стилей, связанных с высотой страницы, задают сразу и для html и для body

Потому что некоторые свойства (например, height 100 процентов) рассчитываются относительно родителя. Если вы укажете height 100 процентов только для body, но не зададите высоту html, браузер может интерпретировать это по‑разному. Поэтому для макетов во всю высоту окна обычно пишут height 100 процентов одновременно для html и body, чтобы цепочка вычислений была полной и предсказуемой.