\n\n```\n\n### Рекомендуемая структура body\n\n```html\n\n \n \n \n \n

Article Title

Article content...

\n \n \n \n \n \n \n \n \n \n \n\n```\n\n### Атрибуты body\n\n```html\n\n\n ...\n\n\n\n\n ...\n\n\n\n\n ...\n\n\n\n\n ...\n\n```\n\n### CSS стилизация body\n\n```css\n/* Основные стили для body */\nbody {\n margin: 0; /* Убираем отступы браузера */\n padding: 0; /* Убираем внутренние отступы */\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n line-height: 1.5;\n color: #333;\n background-color: #fff;\n}\n\n/* Полный экран */\nbody {\n min-height: 100vh; /* Минимум на всю высоту экрана */\n display: flex;\n flex-direction: column;\n}\n\n/* Dark mode */\nbody.dark-theme {\n background-color: #1a1a1a;\n color: #e0e0e0;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n body {\n font-size: 14px;\n }\n}\n```\n\n### JavaScript доступ к body\n\n```javascript\n// Получить элемент body\nconst bodyElement = document.body;\n\n// Или через querySelector\nconst body = document.querySelector(\"body\");\n\n// Добавить класс\ndocument.body.classList.add(\"dark-mode\");\n\n// Убрать класс\ndocument.body.classList.remove(\"dark-mode\");\n\n// Переключить класс\ndocument.body.classList.toggle(\"dark-mode\");\n\n// Добавить стиль\ndocument.body.style.backgroundColor = \"#f0f0f0\";\n\n// Добавить атрибут\ndocument.body.setAttribute(\"data-user\", \"john-doe\");\n\n// Добавить элемент в body\nconst newDiv = document.createElement(\"div\");\ndocument.body.appendChild(newDiv);\n\n// Количество детей\nconsole.log(document.body.children.length);\n\n// Все child элементы\ndocument.body.children; // HTMLCollection\n```\n\n### React пример\n\n```javascript\n// В React весь контент обычно рендерится внутри body\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\nroot.render();\n\n// HTML структура:\n// \n//

\n// \n//

\n// \n```\n\n### Где размещать скрипты?\n\n**В конце body — лучше всего:**\n\n```html\n\n

Welcome

Content loads before scripts

\n \n \n \n \n\n```\n\n**Почему в конце body?**\n1. **Быстрая загрузка контента**: браузер отображает HTML перед загрузкой скриптов\n2. **DOM готов**: к моменту выполнения скрипта все элементы уже загружены\n3. **Лучше performance**: контент не блокируется скриптами\n\n```html\n\n\n \n\n\n \n\n\n\n\n

Content loads fast

\n \n\n\n\n\n \n\n\n ...\n\n```\n\n### Стилизация отступов\n\n```css\n/* Сброс браузерных стилей */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.5;\n color: #1f2937;\n}\n\n/* Для лучшего контраста */\nbody {\n background-color: #ffffff;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nmain {\n flex: 1; /* Растёт и заполняет оставшееся место */\n}\n\nfooter {\n margin-top: auto; /* Прилипает к дну */\n}\n```\n\n### Common Body Patterns\n\n**Полноэкранный layout с header и footer**\n```html\n\n

Navigation

Content

\n \n\n```\n\n**С боковой панелью**\n```html\n\n \n

Main content

\n \n

\n \n\n```\n\n**Single Page Application**\n```html\n\n

\n \n\n```\n\n### Заключение\n\n**``** — это главный контейнер для всего видимого контента веб-страницы. Всегда помни:\n\n1. **Содержит видимый контент**: текст, изображения, формы, видео\n2. **Один на документ**: как и ``\n3. **Скрипты в конце**: для оптимальной производительности\n4. **Сбрось браузерные отступы**: margin: 0; padding: 0;\n5. **Используй семантические элементы**: `

`, `

`\n\nПравильная структура body — основа хорошего HTML документа.","dateCreated":"2026-04-02T21:49:57.096591","upvoteCount":0,"author":{"@type":"Person","name":"claude-haiku-4.5"}}}}

PrepBro

← Назад к вопросам

Что такое body?

1.2 Junior🔥 171 комментариев

#HTML и CSS

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

HTML тег body: назначение и использование

<body> — это основной контейнер HTML-документа, который содержит весь видимый контент страницы. Это второй обязательный элемент в структуре HTML после <head>, и всё, что видит пользователь на странице, находится внутри body.

Структура HTML документа

<!DOCTYPE html>
<html>
  <head>
    <!-- Метаданные, заголовок, стили, скрипты -->
    <meta charset="UTF-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
  </head>
  
  <body>
    <!-- Весь видимый контент -->
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </body>
</html>

Различия между head и body

Область	Head	Body
Видимость	Не видно пользователю	Видно пользователю
Содержимое	Метаданные, стили, скрипты	Контент: текст, изображения, формы
Примеры элементов	`<title>`, `<meta>`, `<style>`, `<link>`	`<h1>`, `<p>`, `<img>`, `<button>`
Количество	Один на документ	Один на документ

Что находится в body?

<body>
  <!-- Текст -->
  <h1>Welcome to my website</h1>
  <p>This is a paragraph.</p>
  
  <!-- Изображения -->
  <img src="photo.jpg" alt="My photo">
  
  <!-- Ссылки -->
  <a href="/about">About me</a>
  
  <!-- Формы -->
  <form>
    <input type="text" placeholder="Your name">
    <button>Submit</button>
  </form>
  
  <!-- Контейнеры -->
  <div class="container">
    <section>...</section>
  </div>
  
  <!-- Списки -->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  
  <!-- Видео, аудио -->
  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>
  
  <!-- Таблицы -->
  <table>
    <tr><th>Name</th><th>Age</th></tr>
    <tr><td>John</td><td>30</td></tr>
  </table>
  
  <!-- Компоненты React/Vue/Angular -->
  <div id="app"></div>
  <script src="app.js"></script>
</body>

Атрибуты body

<!-- Цвет фона -->
<body style="background-color: #f0f0f0;">
  ...
</body>

<!-- Класс для CSS -->
<body class="dark-theme">
  ...
</body>

<!-- Обработчик события загрузки -->
<body onload="initializeApp()">
  ...
</body>

<!-- Data-атрибуты -->
<body data-user-id="12345" data-theme="dark">
  ...
</body>

CSS стилизация body

/* Основные стили для body */
body {
  margin: 0;           /* Убираем отступы браузера */
  padding: 0;          /* Убираем внутренние отступы */
  font-family: "Arial", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}

/* Полный экран */
body {
  min-height: 100vh;  /* Минимум на всю высоту экрана */
  display: flex;
  flex-direction: column;
}

/* Dark mode */
body.dark-theme {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

/* Responsive */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

JavaScript доступ к body

// Получить элемент body
const bodyElement = document.body;

// Или через querySelector
const body = document.querySelector("body");

// Добавить класс
document.body.classList.add("dark-mode");

// Убрать класс
document.body.classList.remove("dark-mode");

// Переключить класс
document.body.classList.toggle("dark-mode");

// Добавить стиль
document.body.style.backgroundColor = "#f0f0f0";

// Добавить атрибут
document.body.setAttribute("data-user", "john-doe");

// Добавить элемент в body
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);

// Количество детей
console.log(document.body.children.length);

// Все child элементы
document.body.children; // HTMLCollection

React пример

// В React весь контент обычно рендерится внутри body
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

// HTML структура:
// <body>
//   <div id="root">
//     <!-- Всё содержимое React приложения -->
//   </div>
// </body>

Где размещать скрипты?

В конце body — лучше всего:

<body>
  <h1>Welcome</h1>
  <p>Content loads before scripts</p>
  
  <!-- Скрипты в конце body -->
  <script src="main.js"></script>
  <script src="analytics.js"></script>
</body>

Почему в конце body?

Быстрая загрузка контента: браузер отображает HTML перед загрузкой скриптов
DOM готов: к моменту выполнения скрипта все элементы уже загружены
Лучше performance: контент не блокируется скриптами

<!-- ❌ Плохо: скрипт в head блокирует загрузку контента -->
<head>
  <script src="heavy-script.js"></script>
</head>
<body>
  <!-- Контент загружается медленнее -->
</body>

<!-- ✅ Хорошо: скрипт в конце body -->
<body>
  <h1>Content loads fast</h1>
  <script src="heavy-script.js"></script>
</body>

<!-- ✅ Ещё лучше: async для необходимых скриптов в head -->
<head>
  <script async src="analytics.js"></script>
</head>
<body>
  ...
</body>

Стилизация отступов

/* Сброс браузерных стилей */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  color: #1f2937;
}

/* Для лучшего контраста */
body {
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* Растёт и заполняет оставшееся место */
}

footer {
  margin-top: auto; /* Прилипает к дну */
}

Common Body Patterns

Полноэкранный layout с header и footer

<body>
  <header>Navigation</header>
  <main>Content</main>
  <footer>Copyright</footer>
</body>

С боковой панелью

<body>
  <nav>Navigation</nav>
  <div class="container">
    <main>Main content</main>
    <aside>Sidebar</aside>
  </div>
  <footer>Footer</footer>
</body>

Single Page Application

<body>
  <div id="root"></div>
  <script src="app.bundle.js"></script>
</body>

Заключение

<body> — это главный контейнер для всего видимого контента веб-страницы. Всегда помни:

Содержит видимый контент: текст, изображения, формы, видео
Один на документ: как и <head>
Скрипты в конце: для оптимальной производительности
Сбрось браузерные отступы: margin: 0; padding: 0;
Используй семантические элементы: <header>, <main>, <footer>, <nav>

Правильная структура body — основа хорошего HTML документа.