Код Справочник по фронтенду

#статьи

4 сен 2025
0

HTML-тег <body>: тело страницы и его структура

Разбираем, для чего нужен тег <body> в HTML и как его использовать.

Иллюстрация: Polina Vari для Skillbox Media

Марина Демидова

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

HTML-страница состоит из двух больших частей: «головы» и «тела». В «голове» (<head>) хранится служебная информация — например, название страницы и ссылки на стили. А в «теле» (<body>) находится всё, что видит пользователь: заголовки, тексты, картинки, кнопки, видео.

Без <body> сайт не сможет полноценно работать: браузеры, конечно, подставят его автоматически, но правильная и понятная разметка всегда должна содержать этот тег.

В этой статье мы разберём, что такое <body>, какие у него есть атрибуты, какие элементы можно размещать внутри и как он влияет на стили и работу скриптов.

Содержание

Где находится тег <body>
Какие элементы можно размещать в <body>
Атрибуты тега <body>
Что будет, если пропустить тег <body>
Как взаимодействуют скрипты внутри <body> взаимодействуют с DOM
Как стилизовать <body> с помощью CSS
Доступность контента в <body>

Где находится тег <body>

Тег <body> всегда идёт после <head> и заканчивается перед закрывающим тегом </html>. Всё, что вы хотите показать пользователю, нужно писать именно внутри него.

Простейшая страница с <body> выглядит так:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Пример страницы</title>
</head>
<body>
  <h1>Заголовок страницы</h1>
  <p>Это абзац текста.</p>
  <img src="photo.jpg" alt="Фото">
</body>
</html>

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

Важно помнить: в одном HTML-документе может быть только один <body>. Если поставить два и больше, браузер начнёт «путаться», и результат будет непредсказуемым.

Какие элементы можно размещать в <body>

Внутри <body> можно размещать почти всё содержимое сайта. Именно здесь находятся тексты, картинки, видео, таблицы, формы и кнопки. То есть всё то, с чем взаимодействует пользователь.

Есть только одно ограничение: теги, которые относятся к «голове» документа, — например, <title>, <meta>, <link> — внутри <body> использовать нельзя. Для них отведён <head>.

А вот что можно добавлять в тело страницы:

Тексты и заголовки — от <h1> до <h6>, абзацы <p>, цитаты <blockquote>.
Списки — нумерованные <ol>, маркированные <ul>, а также списки описаний <dl>.
Мультимедиа — изображения <img>, видео <video>, аудио <audio>, анимации и SVG-графику.
Формы и таблицы — поля ввода, кнопки, таблицы, индикаторы загрузки, прогресс-бары.
Структурные блоки — контейнеры <div> и <span>, а также семантические элементы вроде <header>, <nav>, <main>, <footer>.
Скрипты — с помощью тега <script> можно подключать JavaScript.

Главное — соблюдать правила вложения. Допустим, тег <li> (пункт списка) должен находиться только внутри <ul> или <ol>, а не сам по себе.

Атрибуты тега <body>

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

Атрибуты бывают трёх видов:

Глобальные — их можно использовать почти при любом HTML-теге.
Событийные — позволяют запускать JavaScript при действиях пользователя.
Устаревшие — они сохранились со времён старого HTML, но сегодня их лучше не использовать, вместо них применяют CSS.

Глобальные атрибуты

Глобальные атрибуты (class, id, lang, style) описывают свойства элемента:

id — уникальный идентификатор страницы (обычно у <body> он единственный).

<body id="main-page">
  ...
</body>

С его помощью можно, например, легко находить body в JavaScript:

HTML

<body id="app">

const body = document.getElementById("app");
body.style.backgroundColor = "beige";

Или назначать стиль для конкретной страницы в многооконном сайте:

CSS

body#app {
  background: lightblue;
}

Здесь для страницы с идентификатором app назначается голубой фон, при этом другие страницы сайта могут иметь другой стиль.

class — классы для стилизации и работы скриптов. Атрибут class задаёт имя (или несколько имён) класса элемента.

Например:

<body class="homepage dark-theme user-logged-in">
  <h1>Привет!</h1>
  <p>Это пример, где у &lt;body&gt; сразу три класса.</p>
</body>

CSS

body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }

    /* Класс homepage — оформление главной страницы */
    body.homepage {
      background: lightblue;
    }

    /* Класс dark-theme — тёмная тема */
    body.dark-theme {
      background: #111;
      color: #eee;
    }

    /* Класс user-logged-in — пользователь авторизован */
    body.user-logged-in::before {
      content: "✔ Пользователь в системе";
      display: block;
      margin-bottom: 15px;
      color: limegreen;
      font-weight: bold;
    }

В результате получим:

*Скриншот: Google Chrome / Skillbox Media*

style — встроенные стили (inline CSS). Это CSS-правила, которые записаны прямо в теге <body> с помощью атрибута style, а не во внешнем файле и не в блоке <style>. Они применяются ко всей видимой части документа.

<body style="background-color: lightblue; color: darkblue; font-family: Arial, sans-serif;">
  <h1>Привет!</h1>
  <p>Это пример использования атрибута style у &lt;body&gt;.</p>
</body>

Здесь:

background-color: lightblue; — фон страницы голубой;
color: darkblue; — цвет текста тёмно-синий;
font-family: Arial, sans-serif; — весь текст будет набран гарнитурой Arial.

Встроенные стили используют редко, в основном при тестах или для быстрых правок. В реальной разработке лучше подключать CSS с помощью тега <style> или отдельного файла — так код будет чище и гибче.

lang — указывает язык содержимого страницы. Обычно атрибут lang ставят в <html>, но иногда его нужно указать именно у <body> — например, если язык содержимого отличается от языка документа в целом:

<html lang="en">
<head>
  <title>Многоязычный сайт</title>
</head>
<body lang="ru">
  <h1>Добро пожаловать!</h1>
</body>
</html>

Здесь:

<html lang="en"> — английский устанавливается как базовый (например, для метаданных и служебных частей).
<body lang="ru"> — указывает на то, что страница русскоязычная.

dir — направление текста:

ltr — слева направо (по умолчанию для русского, английского);
rtl — справа налево (арабский, иврит);
auto — браузер определяет автоматически.

<body dir="rtl">
  <h1>مرحبا بالعالم</h1>
  <p>Это пример текста, который идёт справа налево.</p>
</body>

data-* — это специальные атрибуты, которые хранят дополнительные данные прямо в разметке. Эти данные не видно на странице, но к ним можно обращаться через JavaScript или CSS.

Например:

HTML

<body data-theme="dark" data-user="guest" data-page="home">
  <h1>Главная страница</h1>
</body>

Доступ из JavaScript:

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

  // Читаем data-атрибуты
  console.log(body.dataset.theme); // "dark"
  console.log(body.dataset.user);  // "guest"
  console.log(body.dataset.page);  // "home"

  // Меняем тему
  body.dataset.theme = "light";
</script>

CSS:

/* Стили для темы */
body[data-theme="dark"] {
  background: #222;
  color: #fff;
}

body[data-theme="light"] {
  background: #fff;
  color: #000;
}

Событийные атрибуты

Это специальные атрибуты HTML, которые запускают JavaScript-код, когда с элементом что-то происходит (например, клик, загрузка, ввод текста или закрытие страницы). Они задают обработчики событий прямо в HTML.

Событийные атрибуты чаще всего используются для простых примеров. В реальной разработке вместо них обычно применяют addEventListener — встроенный метод JavaScript, который «подписывается» на событие (клик, нажатие клавиши, прокрутку и так далее) и выполняет определённую функцию, когда оно произойдёт. Это считается современным и гибким способом работы с событиями.

Вот часто используемые событийные атрибуты:

onload — показывает сообщение, когда страница загрузилась;
onresize — пишет в консоль, если изменяется размер окна;
onkeydown — выводит сообщение при нажатии клавиши;
onclick — пишет в консоль при клике мышкой;
onbeforeunload — запрашивает подтверждение перед закрытием страницы.

Например:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример событийных атрибутов</title>
</head>
<body 
  onload="alert('Страница полностью загрузилась!')" 
  onkeydown="alert('Вы нажали клавишу: ' + event.key)"
  onbeforeunload="return 'Вы уверены, что хотите покинуть страницу?'"
>

  <h1>Привет!</h1>
  <p>Попробуйте нажать клавишу.</p>

</body>
</html>

Перепишем тот же пример так, чтобы вместо событийных атрибутов в <body> использовать addEventListener.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример с addEventListener</title>
</head>
<body>
  <h1>Привет!</h1>
  <p>Попробуйте нажать клавишу.</p>

  <script>
    // Когда страница загрузится
    window.addEventListener("load", () => {
      alert("Страница полностью загрузилась!");
    });

    // Нажатие клавиши
    window.addEventListener("keydown", (event) => {
      alert("Вы нажали клавишу: " + event.key);
    });

    // Перед уходом со страницы
    window.addEventListener("beforeunload", (event) => {
      event.preventDefault(); // Нужно для некоторых браузеров
      event.returnValue = "Вы уверены, что хотите покинуть страницу?";
    });
  </script>
</body>
</html>

Устаревшие атрибуты (лучше не использовать)

Эти атрибуты использовались в HTML4 для оформления, но сейчас их заменяют CSS:

alink — цвет активной ссылки;
background — URL фонового изображения;
bgcolor — цвет фона;
link — цвет непосещённых ссылок;
text — цвет текста;
vlink — цвет посещённых ссылок.

Пример:

<body bgcolor="#f0f0f0" text="#333" link="#0066cc" vlink="#660099">
  <!-- Устаревший способ задавания стилей -->
</body>

Современная альтернатива (CSS):

body {
  background-color: #f0f0f0;
  color: #333;
}
a:link { color: #0066cc; }
a:visited { color: #660099; }

Что будет, если пропустить тег <body>

По правилам HTML тег <body> обязателен: без него страница считается неполной. Но современные браузеры умные и умеют подставлять его автоматически.

Допустим, вы написали код без <body>:

<!DOCTYPE html>
<html>
<head>
  <title>Пример</title>
</head>
<h1>Заголовок</h1>
<p>Абзац текста.</p>
</html>

Что делает браузер: он видит элементы <h1> и <p> после <head> и автоматически вставляет <body> ... </body>. Фактически код будет таким:

<html>
<head>
  <title>Пример</title>
</head>
<body>
  <h1>Заголовок</h1>
  <p>Абзац текста.</p>
</body>
</html>

Даже если вы забудете и <head>, и <body>, браузер достроит их за вас. Но такая разметка будет невалидной — валидатор выдаст ошибку.

Поэтому лучше всегда писать <body> вручную. Так код остаётся чистым, понятным другим разработчикам и не вызывает лишних проблем.

Как скрипты внутри <body> взаимодействуют с DOM

Когда браузер загружает страницу, он идёт сверху вниз: сначала читает <html>, потом <head>, затем <body> и всё, что в нём находится. При этом параллельно строится структура документа — DOM (Document Object Model).

JavaScript может обращаться только к элементам, которые уже есть в DOM. Поэтому, если скрипт запускается раньше, чем браузер успел создать нужный элемент, код работать не будет.

Есть несколько способов решить эту проблему:

Скрипт в конце <body>

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

<body>
  <button id="btn">OK</button>

  <script>
    const button = document.getElementById("btn");
    button.onclick = () => alert("Нажато!");
  </script>
</body>

Здесь кнопка создаётся первой, и только потом выполняется скрипт. Поэтому всё работает.

Атрибут defer

Если подключать внешний JavaScript с помощью <script src="...">, можно добавить атрибут defer. Тогда код загрузится параллельно, но выполнится только после того, как браузер соберёт весь DOM.

<script src="app.js" defer></script>

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

Как стилизовать <body> с помощью CSS

Тег <body> часто используют, чтобы задать базовое оформление для всей страницы. Например, общий фон, цвет текста или шрифт. Все элементы внутри <body> наследуют эти стили, если у них не прописаны собственные.

Самый простой пример:

body {
  font-family: Arial, sans-serif; /* Общий шрифт */
  color: #333;                    /* Цвет текста */
  background-color: #f0f0f0;       /* Фон */
}

Теперь весь текст будет набран шрифтом Arial, цвет станет тёмно-серым, а фон — светло-серым.

Есть несколько моментов, о которых полезно знать:

Фон: цвет или картинку, указанные для <body>, будет видно за всеми элементами страницы.
Отступы: почти все браузеры добавляют к <body> небольшой внешний отступ (margin). Поэтому разработчики часто обнуляют его в начале работы:

body {
  margin: 0;
}

Высота и прокрутка: можно управлять тем, как страница растягивается и прокручивается.

body {
  min-height: 100vh;  /* Растянуть на всю высоту окна */
  overflow-x: hidden; /* Убрать горизонтальную прокрутку */
}

Разница с <html>: стили в <html> обычно влияют на всё окно браузера (например, задают общий фон), а стили в <body> применяются к «листу» контента, который видит пользователь.

Вот пример, который показывает, чем стили в <body> отличаются от стилей в <html>:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Космос</title>
  <style>
    /* Фон всего окна браузера */
    html {
      background: linear-gradient(to bottom, #0d1b2a, #000);
      height: 100%;
    }

    /* Белый «лист» контента */
    body {
      margin: 40px;
      background-color: rgba(255, 255, 255, 0.1);
      color: #f1f1f1;
      font-family: "Trebuchet MS", sans-serif;
      text-align: center;
      border-radius: 20px;
      padding: 40px;
      backdrop-filter: blur(5px); /* Создаём эффект «стекла» */
    }

    h1 {
      font-size: 3rem;
      margin-bottom: 20px;
      text-shadow: 0 0 10px #00f0ff;
    }

    p {
      font-size: 1.2rem;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>???? Привет из космоса!</h1>
  <p>
   Тег <code>html</code>  задаёт фон всей страницы, 
    а тег <code>body</code> создаёт полупрозрачное "окно", 
    на котором читается текст.
  </p>
</body>
</html>

Страница будет выглядеть так:

Доступность контента в <body>

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

Используйте семантические теги: заголовки <h1> — <h6>, списки, абзацы и структурные элементы (<header>, <main>, <footer>). Это помогает экранным читалкам ориентироваться на странице.

Добавляйте альтернативные тексты. Для изображений указывайте alt. Если картинка будет недоступна, останется хотя бы текст с её описанием, который смогут воспроизвести экранные читалки для людей с ограничениями зрения:

<img src="cat.jpg" alt="Серый кот лежит на подоконнике">

Следите за контрастом и читаемостью. Текст должен быть контрастным по отношению к фону и не слишком мелким — не менее 16 px.

Доступность с клавиатуры. Все кнопки, ссылки и формы должны быть доступны через Tab. Используйте атрибуты tabindex, если нужно задать особое поведение некоторых элементов. Избегайте элементов, до которых можно добраться только с помощью мыши.

ARIA-атрибуты

Иногда стандартных тегов не хватает для доступности. Например, вы сделали кнопку с помощью <div>. Для глаз пользователя это кнопка, а для экранного диктора — просто блок. Чтобы исправить это, используют ARIA-атрибуты (Accessible Rich Internet Applications). Они помогают описать элемент более точно.

role — задаёт роль элемента.

<div role="button" tabindex="0">Отправить</div>

Теперь диктор озвучит этот блок как кнопку, а tabindex="0" позволит выбрать её с клавиатуры.

aria-label — даёт текстовое описание, если видимой подписи нет.

<button aria-label="Закрыть окно">✖</button>

Диктор озвучит «Закрыть окно», даже если на странице только символ ✖.

aria-hidden="true" — скрывает элемент от диктора.

<span aria-hidden="true">★</span>

Звёздочка видна, но не читается вслух, это просто декоративный элемент

ARIA — не замена семантической разметки. Если есть подходящий тег (<button>, <nav>, <header>), используйте его. ARIA-атрибуты нужны только в случаях, когда обычных средств не хватает.

Читайте также: