Мы используем файлы cookie для обеспечения работоспособности сервиса, улучшения навигации и маркетинговых активностей Serpstat. Нажимая "Принять и продолжить", вы соглашаетесь с нашей Политикой конфиденциальности

Сообщить об ошибке

Отменить
10303
How-to Читать 6 минут

Что должно присутствовать в теге Body

Что такое тег Body и что должно в нем присутствовать
АУДИТ САЙТА — КОНТЕНТ
Инструкцию одобрил
Руководитель SEO отдела в Mnogoland
Тег body — важный элемент, который содержит весь контент, отображаемый на веб-странице в браузере. Его необходимо правильно заполнять, чтобы страница корректно выглядела и успешно ранжировалась в поисковых системах.

Что такое тег body

Тег body — неотъемлемая часть любой HTML-страницы, необходимая для обозначения границ основного содержимого, которое показывается пользователям. Упрощенно HTML-страница имеет следующую структуру:

  • head — блок заголовков, содержащий техническую информацию, скрипты и метатеги, которые браузер не показывает пользователям в стандартном режиме просмотра. Исключение — метатег <title>, который определяет заголовок страницы;

  • body — все содержимое страницы, доступное пользователям.

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

Где находится тег body

Увидеть HTML-теги на web-странице можно, кликнув правой кнопкой мыши и нажав «Просмотр кода страницы»:
Просмотр кода страницы в Chrome
В начале страницы размещен открывающийся тег <head>:
Тег Head в коде страницы
Открывающийся тег <body> следует сразу после закрывающегося </head>, завершающего блок заголовков:
Теги head и body

Для чего нужен тег body

Тег <body> предназначен для добавления всего контента и функционала для взаимодействия с пользователями — сюда относятся заголовки, тексты, гиперссылки, баннеры, картинки, видео, формы для связи и прочее.

Также в теге могут размещаться js-скрипты, выполняющие различные функции. Код при этом размещается внутри тегов <script></script>. В HTML5 тип скрипта дополнительно прописывать не нужно, так как по умолчанию это JavaScript. В устаревших версиях HTML js-скрипты прописывались так:
Скрипты Javascript в теге Body
Еще в тег <body> можно добавлять атрибуты и события, видоизменяющие страницу. Например, можно добавить определенное сообщение, появляющееся после загрузки страницы или при нажатии кнопки мыши.

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

В тег можно добавлять атрибуты, определяющие цветовую схему страницы, хотя более предпочтительно использовать селектор body в отдельном файле с CSS-стилями:
Атрибуты в теге Body
Применение ряда атрибутов тега <body>, например, rightmargin и leftmargin, осуждается спецификацией HTML и станет причиной не валидного кода. Некоторые атрибуты можно использовать с переходным типом <!DOCTYPE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
При использовании атрибутов в теге body можно сразу посмотреть, как страница будет выглядеть при внесении изменений. Для этого в Google Chrome нужно кликнуть правой кнопкой мыши по странице и выбрать «Просмотреть код», после этого браузер будет отображаться в режиме разработчика.

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

  • В данном примере использован атрибут bgcolor, определяющий фоновый цвет страницы. С его помощью исходный цвет фона страницы был изменен на черный:
Атрибут bgcolor в теге Body
Цвет можно указать с помощью шестнадцатеричных кодов либо названий, которые предусмотрены в стандарте HTML;

  • изменение цвета текста страницы с помощью атрибута text:
Атрибут text в теге Body
  • изменение фонового изображения с использованием атрибута background:
Атрибут background в теге Body
Путь к файлу можно использовать как в относительном, так и в абсолютном виде. Относительный путь предпочтительнее, так как обеспечивает менее длинные ссылки, а также избавляет от проблем при смене домена. В этом случае все ссылки останутся рабочими, в отличие от варианта с абсолютным адресом, при котором после изменения домена гиперссылки станут битыми.

Можно ли добавлять метатеги в body

Метатеги, например, <robots>, <description> должны помещаться в раздел заголовков документа — head. Метатеги предназначены для служебной информации о документе, которая не демонстрируется в теле документа.

Попытки использовать какой-либо метатег в body делают код недействительным с точки зрения спецификации HTML и могут нарушить разметку документа.

В некоторых случаях при ошибочных размещениях метатегов в теле страницы возможен их автоматический перенос браузером в раздел head и корректное отображение документа. Однако желательно создавать валидную разметку и добавлять метатеги только в раздел заголовков, а не в основное содержимое страницы.

Заключение

1
Тег <body> — необязательный элемент в спецификации HTML5, однако его использование на веб-страницах удобно для разграничения служебной информации и контента сайта. Также он полезен для создания стилей страницы в CSS-файле.
2
Наполнять тег <body> стоит уникальным контентом, который будет представлять интерес для пользователей и в полной мере соответствовать запросам целевой аудитории.
3
В данном теге может содержаться информация в разнообразных видах и формах: текст, мультимедийный контент и скрипты, делающие страницу интерактивной.
4
Нужно с осторожностью использовать атрибуты тега <body>, поскольку многие из них противоречат спецификации HTML и их применение приводит к не валидной верстке.
5
Не стоит размещать метатеги в <body> поскольку это нарушает правила спецификации HTML.
Эта статья — часть модуля «Аудит сайта» в Serpstat
«Аудит сайта» в Serpstat
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.
Запустить аудит сайта

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

2.83 из 5 на основе 6 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Optional
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

Отправьте заявку и наш специалист предложит вам варианты обучения: персональную демонстрацию, пробный период или материалы для самостоятельного изучения и повышения экспертизы. Все для комфортного начала работы с Serpstat.

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы сохранили ваши новые настройки рассылок.

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов
Открыть чат технической поддержки