W3docs
ru
Войти

HTML тег <body>

Тег <body> содержит видимое содержимое страницы. Узнайте о его роли, заменах устаревших атрибутов в CSS и событиях body.

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

Роль <body> в документе

Каждый HTML-документ делится на две части внутри корневого элемента <html>:

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

Таким образом, <body> — это видимая область контента. Если вы пишете заголовок, абзац или изображение, которое должно появиться на странице, оно помещается внутрь <body>.

К элементу <body> часто добавляют CSS-классы, позволяя разработчикам и дизайнерам легко применять стили ко всей странице (например, класс theme-dark, который меняет оформление всего, что находится ниже). Даже если такие классы никогда не используются, они не вызывают проблем.

Синтаксис

Тег <body> является парным. Содержимое записывается между открывающим тегом <body> и закрывающим </body>.

Пример HTML тега <body>:

HTML тег <body>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Content of the document</p>
  </body>
</html>
Попробуйте сами »

Результат

Result

Пример HTML тега <body> с CSS-свойствами color и line-height:

Пример HTML тега <body> с CSS-свойствами

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        color: #444444;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <h1>HTML body tag example</h1>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
  </body>
</html>
Попробуйте сами »

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

В старом HTML тег <body> имел презентационные атрибуты, задававшие цвета для всей страницы и фоновое изображение. Они устарели в HTML5 — не используйте их. Каждый из них имеет замену в CSS:

АтрибутЗначениеНазначениеСовременный аналог в CSS
bgcolorcolorЦвет фона страницыbackground-color
textcolorЦвет текста по умолчаниюcolor
backgroundURLФоновое изображениеbackground-image
linkcolorЦвет непосещённых ссылокa:link { color: … }
vlinkcolorЦвет посещённых ссылокa:visited { color: … }
alinkcolorЦвет активной (при нажатии) ссылкиa:active { color: … }

Способ на CSS

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #f5f5f5;
        color: #333333;
        background-image: url("paper.png");
      }
      a:link    { color: #0645ad; }
      a:visited { color: #663399; }
      a:active  { color: #d04437; }
    </style>
  </head>
  <body>
    <p>Styled with CSS instead of deprecated <code>&lt;body&gt;</code> attributes.</p>
    <p><a href="https://www.w3docs.com">A link</a></p>
  </body>
</html>

Тег <body> также поддерживает стандартные глобальные атрибуты (class, id, style, lang и другие) и атрибуты событий.

Атрибуты событий, специфичные для body

Большинство атрибутов событий (например, onclick) применимы к любому элементу, но некоторые имеют смысл только в <body>, поскольку реагируют на события всего окна/документа:

АтрибутСрабатывает, когда
onloadСтраница завершила загрузку (всё содержимое и ресурсы).
onunloadПользователь уходит со страницы, и она выгружается.
onresizeРазмер окна браузера изменяется.

Пример — выполнить код, когда страница готова, и повторно при каждом изменении размера окна:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title of the document</title>
  </head>
  <body onload="report('loaded')" onresize="report('resized')">
    <p id="status">Waiting…</p>
    <script>
      function report(message) {
        document.getElementById("status").textContent = "Window " + message;
      }
    </script>
  </body>
</html>

В современном коде их часто добавляют через JavaScript, например window.addEventListener("load", …), что позволяет отделить поведение от разметки.

Доступность

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

  • Атрибут lang на элементе <html> (например, lang="en") сообщает программам чтения с экрана, какой язык использовать при озвучивании всего содержимого <body>. Правильная его установка улучшает произношение.
  • Поскольку в <body> находятся и навигация, и основной контент, добавьте ссылку для пропуска навигации как первый фокусируемый элемент, чтобы пользователи клавиатуры и программ чтения с экрана могли сразу перейти к основному содержимому:
<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <nav><!-- site navigation --></nav>
  <main id="main">
    <h1>Page title</h1>
    <p>Main content…</p>
  </main>
</body>

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

Практика

Практика
Что верно о теге HTML body согласно информации на этой странице?
Что верно о теге HTML body согласно информации на этой странице?
Практика
Каков правильный способ задать цвет фона страницы в HTML5?
Каков правильный способ задать цвет фона страницы в HTML5?
Was this page helpful?