14269
How-to 7 min read September 26, 2019

What should be present in the Body tag

The Body tag is an important element that contains all the content displayed on a web page in a browser. It must be filled in correctly in order for the page to look and be successfully ranked in search engines.

What is the Body tag

The Body tag is an integral part of any HTML page, required to indicate the boundaries of the main content that is displayed to users. Simplistically, an HTML page has the following structure:

  • head is a block of headings containing technical information, scripts and meta tags that the browser does not show to users in standard viewing mode. The exception is the <title> meta tag, which defines the page title;
  • body is all content of a page that is available to users.

In an HTML document, there can only be one <body> tag. This tag should contain quality and unique content which users find interesting for the successful optimization of a web page. However, one must make sure that it neither duplicates completely nor partially the project's or other website's content.

Where is the Body tag located

You can see the web page's HTML tags by right-clicking and selecting "View page source":
View page code in Chrome
The opening <head> tag is located at the beginning of the page:
Head tag in page code
The opening <body> tag comes right after the closing </head> tag finishing the block of headings:
Head and body tags

Why do you need the Body tag

The <body> tag is meant to contain all content and functionality for the interaction with users; they are headings, texts, hyperlinks, banners, images, videos, contact forms, and other things.

The tag can also contain JS scripts performing various functions. In that case, the code is placed within the <script></script> tags. In HTML5, you don't have to additionally specify the script type as it is JavaScript by default. In the obsolete HTML versions, JS scripts have been implemented like this:
Javascript scripts in Body tag
Attributes and events modifying a page can be also added to the <body> tag. For instance, you can add a certain message which occurs when a page is loaded or when you click the mouse button.

Attributes of the <body> tag

You can add attributes to the tag that define the color scheme of the page, although it is more preferable to use the body selector in a separate file with CSS styles:
Attributes in the Body tag
The use of some attributes of the <body> tag, for example, rightmargin and leftmargin, is deprecated by the HTML specification and will cause invalid code. Some attributes can be used with the transition type <!DOCTYPE>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
When using attributes in the body tag, you can immediately see how the page will look when you submit changes. To do this, in Google Chrome you need to right-click on the page and select "View page source", after which the browser will be displayed in developer mode.

Examples of using the <body> tag attributes

  • In this example, the bgcolor attribute is used, which defines the background color of the page. The original page background color was changed to black via this attribute:
Bgcolor attribute in Body tag
Color can be specified using hexadecimal codes or names that are provided in the HTML standard;

  • changing the text color on a page using the text attribute:
Text attribute in Body tag
  • changing the background image using the background attribute:
Background attribute in Body tag
The file path can be used both in relative and absolute form. The relative path is more preferable as it provides shorter links and also eliminates problems when changing the domain. In this case, all links will remain in operation, unlike the option with an absolute address, in which, after changing the domain, hyperlinks will become broken.

Is it possible to add meta tags to the body tag?

For example, <robots> and <description> meta tags should be placed in the heading section of the document which is the head tag. Meta tags are meant to provide the service information about the document which is not shown in the document body.

Attempts to use a meta tag in the body render the code invalid from the HTML specification viewpoint and may disrupt the markup of the document.

In some cases, if the meta tags are incorrectly placed in the body of the page, they can be automatically transferred by the browser to the head section and the document will be displayed correctly. However, it is desirable to create valid markup and add meta tags only to the heading section and not to the main content of the page.

Conclusion

1
The <body> body is an optional element in the HTML5 specification, but its use on web pages is convenient for distinguishing between service information and site content. It is also useful for creating page styles in a CSS file.
2
You must fill the <body> tag with unique content that users will find interesting and that will fully meet the requirements of the target audience.
3
This tag can contain information in various formats and shapes: text, multimedia content, and scripts that make the page interactive.
4
You need to use the <body> tag attributes with caution since many of them contradict the HTML specification and their application leads to an invalid markup.
5
Don't place meta tags in the <body> tag as they violate the HTML specification rules.
This article is a part of Serpstat's "Site Audit" tool
SEO Audit in Serpstat" title = "What is the Body tag and what should be present in it 16261788343128" />
Audit all the site or page in one click. A complete list of errors, sorted by severity, ways to resolve them and recommendations. Any frequency of verification and automatic email reports.
Run Site Audit

Speed up your search marketing growth with Serpstat!

Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.

A pack of tools for reducing your time on SEO tasks.

Get free 7-day trial

Rate the article on a five-point scale

The article has already been rated by 1 people on average 5 out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Discover More SEO Tools

Tools for Keywords

Keywords Research Tools – uncover untapped potential in your niche

Serpstat Features

SERP SEO Tool – the ultimate solution for website optimization

Keyword Difficulty Tool

Stay ahead of the competition and dominate your niche with our keywords difficulty tool

Check Page for SEO

On-page SEO checker – identify technical issues, optimize and drive more traffic to your website

Share this article with your friends

Are you sure?

Introducing Serpstat

Find out about the main features of the service in a convenient way for you!

Please send a request, and our specialist will offer you education options: a personal demonstration, a trial period, or materials for self-study and increasing expertise — everything for a comfortable start to work with Serpstat.

Name

Email

Phone

We are glad of your comment
I agree to Serpstat`s Privacy Policy.

Thank you, we have saved your new mailing settings.

Report a bug

Cancel
Open support chat
mail pocket flipboard Messenger telegramm