Как называется тег у тела HTML?

2.0 Middle🔥 181 комментариев

#HTML и CSS#Оптимизация и производительность

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

🐱

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

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

HTML-структура и тег body

Тег, который представляет тело HTML-документа, называется <body>. Это один из основных структурных элементов веб-страницы.

Основная структура HTML

HTML-документ состоит из несколько ключевых частей:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <!-- Метаинформация о странице -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Название страницы</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  
  <body>
    <!-- Видимое содержимое страницы -->
    <header>Шапка сайта</header>
    <main>Основное содержимое</main>
    <footer>Подвал сайта</footer>
    <script src="script.js"></script>
  </body>
</html>

Разница между head и body

<head> — контейнер метаинформации, невидим пользователю. Содержит title, meta, link, style, script (для подгрузки)
<body> — контейнер видимого контента. Всё, что видит пользователь, находится здесь

Что может быть в body

В теге body размещается вся видимая структура страницы:

<body>
  <!-- Семантические элементы -->
  <header>Навигация и логотип</header>
  
  <nav>Меню</nav>
  
  <main>
    <article>Основная статья</article>
    <aside>Боковая панель</aside>
  </main>
  
  <section>Раздел контента</section>
  
  <footer>Информация об авторе, контакты</footer>
  
  <!-- Скрипты загружаются в конце body для оптимизации -->
  <script src="app.js"></script>
</body>

Атрибуты body

У тега body есть несколько полезных атрибутов:

<body class="dark-theme" id="main" data-user="admin">
  <!-- Атрибуты для стилизации и идентификации -->
</body>

// Доступ к body в JavaScript
const bodyElement = document.body;
console.log(bodyElement); // <body>...</body>

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

// Проверка класса
if (document.body.classList.contains("dark-mode")) {
  console.log("Тёмная тема включена");
}

// Получение всех children
const children = document.body.children;

Основные правила для body

Только один body на странице
Закрывающий тег</body> обязателен
Скрипты обычно размещают перед закрытием body для оптимизации загрузки
Стили можно добавлять через class или style атрибут
Семантическая разметка улучшает доступность и SEO

CSS для body

В Tailwind или обычном CSS body часто стилизуют для базовых стилей страницы:

body {
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

// В Next.js или React можно устанавливать стили на body
useEffect(() => {
  document.body.style.overflow = "hidden"; // Запретить скролл
  return () => {
    document.body.style.overflow = "auto"; // Восстановить
  };
}, []);

Итого

Тег <body> — это контейнер для всего видимого содержимого веб-страницы. Он идёт после <head> и содержит всю разметку, которую видит пользователь. В body обычно размещают семантические теги (header, nav, main, footer) и скрипты для загрузки после DOM.