Тег <body> идёт сразу после закрывающего </head> - и это ровно то, что видит посетитель: текст, картинки, кнопки, формы. Если <head> - служебная часть документа, то <body> - вся его видимая содержательная часть. На странице может быть только один <body>, и всё, что должно отображаться, лежит внутри него.
В этой статье
<body>
<h1>Заголовок страницы</h1>
<p>Текст страницы.</p>
</body>Отступ body по умолчанию
Браузер сам, без единой строчки CSS, добавляет тегу <body> небольшой отступ от края окна - обычно около 8px со всех сторон. Это часть встроенных стилей браузера (user agent stylesheet), а не ошибка вёрстки. Из-за него у многих новичков макет "не совпадает с дизайном" ровно на эти несколько пикселей, пока они не добавят сброс вручную.
Пример: отступ по умолчанию и его сброс
Нажмите на переключатель - серая рамка изображает окно браузера, цветной блок внутри - это <body>:
Отступ 8px - браузер добавил его сам, CSS ещё не написан.
Как изменить body с помощью CSS
Сброс отступа - только один частный случай. На практике body - обычное место для базовых параметров всей страницы: фонового цвета, шрифта и цвета текста по умолчанию, минимальной высоты. Всё это задаётся обычным CSS-правилом для тега, отдельных атрибутов для этого не нужно:
body {
margin: 0;
font-family: system-ui, sans-serif;
background: #ffffff;
color: #222222;
min-height: 100vh;
}Атрибуты body: что использовать сейчас
Из старых HTML-атрибутов у body сегодня остались только два общих. Остальные были нужны до появления CSS и теперь считаются устаревшими - оставлены в таблице специально, чтобы было понятно, чем их заменить, если такое найдётся в старом коде.
| Атрибут | Статус | Комментарий |
|---|---|---|
class | актуален | Обычный класс для стилизации через CSS, как у любого другого тега |
id | актуален | Уникальный идентификатор, если он нужен именно на body - например, для якоря или JS |
bgcolor | не используется | Замена - CSS background-color |
text | не используется | Замена - CSS color |
link / vlink / alink | не используется | Замена - CSS a, a:visited, a:active |
background | не используется | Замена - CSS background-image |
Ошибки при использовании body
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Не сброшен отступ браузера по умолчанию | По краям страницы виден непонятный зазор в несколько пикселей, макет "не совпадает" с дизайном | Добавить body { margin: 0; } в начало CSS (или использовать готовый CSS-reset) |
На странице два тега <body> | Браузер использует только первый, содержимое второго может потеряться или отобразиться непредсказуемо | В документе должен быть ровно один <body> |
Видимый контент случайно оказался внутри <head>, а не <body> | Невалидная разметка, поведение зависит от браузера | Проверить, что весь видимый контент - строго внутри <body> |
