Тег <body> — это контейнер для всего видимого содержимого веб‑страницы: текста, картинок, форм, видео и скриптов. Именно то, что лежит внутри <body>, пользователь видит в браузере. Но у этого тега есть чёткие правила: какие элементы уместны, а какие туда класть не стоит — или даже нельзя по спецификации HTML.
Что можно класть внутрь <body>
В <body> помещают всё, что формирует интерфейс и контент страницы.
Текстовые и заголовочные элементы. Сюда относятся заголовки от <h1> до <h6>, абзацы <p>, цитаты <blockquote> и <q>, списки (<ul>, <ol>, <dl>). Пример:
<body> <h1>Главная страница</h1> <p>Это первый абзац текста.</p> <ul> <li>Пункт списка 1</li> <li>Пункт списка 2</li> </ul> </body>
Медиа и графика. Картинки (<img>), видео (<video>), аудио (<audio>), SVG и холсты Canvas — всё это нормально размещать внутри <body>. Например:
<body> <img src="photo.jpg" alt="Описание фото"> <video src="intro.mp4" controls></video> </body>
Формы и интерактив. Поля ввода (<input>, <textarea>, <select>), кнопки (<button>), метки <label>, элементы <dialog> — всё это тоже относится к содержимому страницы и живёт в <body>.
Структурные и семантические блоки. Современные семантические теги вроде <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> — это тоже часть видимого контента. Важно помнить правило: на странице должен быть только один <main> (основной контент), а вот <header> или <nav> может быть несколько (например, шапка сайта плюс шапка статьи).
Контейнеры и вспомогательные элементы. <div> и <span> — универсальные контейнеры, которые используют, когда нет подходящего семантического тега. Их тоже свободно кладут внутрь <body>.
Скрипты. Тег <script> можно размещать внутри <body>. Часто его ставят в самом низу, чтобы сначала загрузился и отрисовался контент, а потом уже выполнялся JavaScript:
<body> <p>Контент страницы.</p> <script src="app.js"></script> </body>
Также в <body> можно использовать <template> для фрагментов, которые не отображаются сразу, а клонируются через JS.
Что нельзя (или не нужно) класть внутрь <body>
Есть элементы, которым в <body> не место — они либо относятся к метаданным, либо нарушают структуру документа.
Метаданные и подключение ресурсов. Теги <title>, <meta>, <link>, <base> — это содержимое <head>, а не <body>. Если положить <title> внутрь <body>, браузер его проигнорирует, а валидатор выдаст ошибку.
Корневые элементы. Нельзя вкладывать внутрь <body> теги <html>, <head> или ещё один <body>. В документе должен быть ровно один <body> на весь документ. Если написать два <body>, браузер обычно «забудет» про второй и будет работать только с первым.
Фреймы и устаревшие конструкции. Теги вроде <frame>, <frameset> устарели и не используются в современном HTML5. Их не стоит применять вообще, а уж тем более внутри <body>.
Некоторые стили лучше выносить. Тег <style> технически можно положить в <body>, но это плохая практика. Стили принято держать в <head> либо подключать внешними CSS‑файлами. Исключение — динамические стили, которые генерируются скриптом уже после загрузки страницы.
Устаревшие атрибуты оформления. Раньше у <body> были атрибуты вроде bgcolor, text, link, vlink для задания цветов. Сейчас их не используют: всё оформление делают через CSS.
Частые ошибки и как их избежать
- Кладут
<title>или<meta>внутрь<body>. Это самая типичная ошибка новичков. Помните:<head>— для метаданных,<body>— для контента. - Пытаются вложить
<html>или второй<body>внутрь первого. Так делать нельзя: структура документа должна быть линейной и однозначной. - Используют устаревшие атрибуты
<body>для цветов и отступов. Вместо этого подключайте CSS и управляйте стилями оттуда. - Забывают про семантику. Например, делают меню через
<div>без<nav>, а основной контент оборачивают в<div class="main">вместо<main>. Это не ломает страницу, но ухудшает доступность и SEO.
Практический пример правильной структуры
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Пример страницы</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Мой сайт</h1> <nav> <a href="/">Главная</a> <a href="/about">О нас</a> </nav> </header> <main> <article> <h2>Заголовок статьи</h2> <p>Текст статьи с описанием и примерами.</p> <img src="illustration.jpg" alt="Иллюстрация к статье"> </article> </main> <footer> <p>© 2024 Мой сайт</p> </footer> <script src="scripts.js"></script> </body> </html>
Пару слов про «браузер сам добавит <body>
Если не написать тег <body> вручную, современные браузеры его автоматически создадут. Но полагаться на это не стоит: явная разметка делает код понятным, предсказуемым и удобным для поддержки. К тому же при работе с DOM или вставкой фрагментов HTML неявный <body> может вести себя неожиданно.
Загрузка...