HTML-тег <​body​>: тело страницы и его структура
2026-02-21 00:46 Diff
https://skillbox.ru/media/code/html-teg-body-telo-stranicy-i-ego-struktura/

#статьи

  • 4 сен 2025
  • 0

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

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

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

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

Без <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> можно размещать почти всё содержимое сайта. Именно здесь находятся тексты, картинки, видео, таблицы, формы и кнопки. То есть всё то, с чем взаимодействует пользователь.

Есть только одно ограничение: теги, которые относятся к «голове» документа, — например, <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>, а не сам по себе.

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

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

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

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

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

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

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

HTML

<body id="app">

JS

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; }

По правилам 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> вручную. Так код остаётся чистым, понятным другим разработчикам и не вызывает лишних проблем.

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

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

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

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

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

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

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

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

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

Тег <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>

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

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

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

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

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

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

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

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

Иногда стандартных тегов не хватает для доступности. Например, вы сделали кнопку с помощью <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-атрибуты нужны только в случаях, когда обычных средств не хватает.

Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе