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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

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

Отменить
491
How-to Читать 5 минут 29 марта 2019

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

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

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

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

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

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

В HTML-документе должен быть только один тег <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.33 из 5 на основе 3 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.

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

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

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

Или email
Забыли пароль?
Или email
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
Сообщение
необязательно

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

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

Я хочу больше лимитов