Тег body в HTML: что нужно знать.

Дата последнего обновления статьи: 2025-01-01

BODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLE<body>

Это изображениелицензировано подCC BY 4.0

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

Синтаксис тега body

Базовый синтаксис тега body выглядит следующим образом:

<body>
  <!-- Содержимое страницы -->
</body>

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

alink - позволяет задать цвет активных ссылок при нажатии. В разных браузерах работает по разному, вместо него лучше использовать CSS свойство color в псевдоклассе :active.
background - позволяет задать фоновое изображение страницы. В разных браузерах работает по разному, вместо него лучше использовать CSS свойство background-image.
bgcolor - позволяет задать цвет фона страницы. В разных браузерах работает по разному, вместо него лучше использовать CSS свойство background-color.
bottommargin - позволяет задать отступ снизу страницы. В разных браузерах работает по разному, вместо него лучше использовать CSS свойство margin-bottom.
leftmargin - позволяет задать отступ слева страницы. В разных браузерах работает по разному, вместо него лучше использовать CSS свойство margin-left.
link - позволяет задать цвет непосещённых ссылок. В разных браузерах работает по разному, вместо него лучше использовать CSS свойство color в псевдоклассе :link.
onafterprint - функция обратного вызова, которая срабатывает после печати страницы.
onbeforeprint - функция обратного вызова, которая срабатывает перед печатью страницы.
onbeforeunload - функция обратного вызова, которая срабатывает перед выгрузкой страницы, то есть перед закрытием текущей вкладки или переходом на другую страницу в текущей вкладке.
onblur - функция обратного вызова, которая срабатывает при потере документом фокуса.
onerror - функция обратного вызова, которая срабатывает когда документ загружается с ошибкой.
onfocus - функция обратного вызова, которая срабатывает при получении документом фокуса.
onhashchange - функция обратного вызова, которая срабатывает при изменении части URL после #.
onlanguagechange - функция обратного вызова, которая срабатывает при изменении языка страницы. Это экспериментальный атрибут, его поведение может менятся.
onload - функция обратного вызова, которая срабатывает после полной загрузки страницы.
onmessage - функция обратного вызова, которая срабатывает в момент получения документом сообщения.
onoffline - функция обратного вызова, которая срабатывает при потере интернет соединения.
ononline - функция обратного вызова, которая срабатывает при восстановлении интернет соединения.
onpopstate - функция обратного вызова, которая срабатывает при изменении истории браузера.
onredo - функция обратного вызова, которая срабатывает когда пользователь переходит к следующей странице в истории браузера или обновляет страницу.
onresize - функция обратного вызова, которая срабатывает при изменении размера окна.
onstorage - функция обратного вызова, которая срабатывает при обновлении хранилища.
onundo - функция обратного вызова, которая срабатывает при переходе к предыдущей странице в истории браузера.
onunload - функция обратного вызова, которая срабатывает при выгрузке страницы, когда пользователь переходит на другую страницу или закрывает вкладку.
rightmargin - позволяет задать отступ справа страницы. В разных браузерах работает по разному, вместо него лучше использовать CSS свойство margin-right.
text - позволяет задать цвет текста. В разных браузерах работает по разному, вместо него лучше использовать CSS свойство color.
topmargin - позволяет задать отступ сверху страницы. В разных браузерах работает по разному, вместо него лучше использовать CSS свойство margin-top.
vlink - позволяет задать цвет посещенных ссылок. В разных браузерах работает по разному, вместо него лучше использовать CSS свойство color в псевдоклассе :visited.

Так же поддерживает глобальные атрибуты.

Примеры использования тега body

Простой пример

<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <h1>Заголовок страницы</h1>
    <p>Параграф с текстом</p>
  </body>
</html>

Пример с обработчиками событий

<body
  onload="console.log('Страница загружена')"
  onunload="console.log('Страница закрывается')"
>
  <h1>Страница с обработчиками событий</h1>
</body>

Советы по использованию тега body

Тег body должен идти следом за тегом head и быть единственным в HTML-документе.
Вместо атрибутов body для управления стилями страницы лучше использовать CSS.
Доступ к элементу body можно получить через свойство document.body.
Используйте семантические элементы внутри body для лучшей структуры документа.

Часто задаваемые вопросы (FAQ)

1 Можно ли использовать несколько тегов body на одной странице?

Нет, на одной странице должен быть только один тег body.

2 Как тег body влияет на SEO?

Правильное использование тега body критически влияет на SEO.

3 Какие элементы можно размещать внутри тега body?

Внутри тега body можно размещать любые HTML-элементы, которые предназначены для отображения на странице: текст, изображения, ссылки, формы и другие элементы.

Заключение

Тег body является фундаментальным элементом HTML-документа, определяющим основное содержимое веб-страницы. Правильное использование этого тега и его атрибутов важно для создания хорошо структурированных и функциональных веб-страниц.

Для получения дополнительной информации о теге body, рекомендуем ознакомиться с официальной документацией на MDN.

Предыдущая страница

Следующая страница