Welcome to the html tutorial, we already covered head tag, title tag and page structure and here we will cover body tag, it is an important tag in html document. The body tag defines the main content of the Html page that will directly visible on your web page.
Body tag – Definition
“ It is a wrapper which will wrap all the contents of an Html document that will be displayed on screen, like headings, paragraphs, images, tables, hyperlinks etc.”
Body tag – Syntax
The syntax for the html body tag is:
<body> </body>
Body tag – Attributes
Id – the id attribute will give a unique identity to an associated element and can be easily referred among the other instances.
For example:
<html>
<head>
<style>
#hellohead {
color: red;
}
</style>
</head>
<body>
<h2 id="hihead"> Sharplesson says hi! </h2>
<h2 id="hellohead"> Sharplesson says hello</h2>
<h2 id="byehead"> sharplesson says bye</h2>
</body>
</html>
In the above example, we are trying to change the color of the h2 tag with id=” hellohead”, then only that subheading will change to red color. If you will run this program then you will see results like:
Class – The class attribute specifies one or more class names to an element.
Let’s understand it with the example, we have p tag and used different class for the same p tag.
<html>
<head>
<style>
p.you {
color: green;
}
p.imp {
color: red;
}
</style>
</head>
<body>
<p class="imp">A paragraph.</p>
<p class="you">Note that this a paragraph. :)</p>
</body>
</html>
In the above example we have used the class “imp” and class “you” for the paragraph element.
Style – It is helpful to use inline style sheets for the elements, for example:
If you want to style a particular element, then you can go for inline CSS, like we have taken in the below example:
<h2 style="color:blue;">Sharplesson says hi</h2>
If you will run this program, then the result will be
Sharplesson says hi
Title – the title attribute can be used in a body tag to provide a title to a element.
<html>
<body>
<p title=" Easy and fun education at">sharplesson.com</p>
</body>
</html>
In the above example, you can see we gave the title of a paragraph element, when you put mouse cursor on it, then it will display the title set by you.
Lang – It specifies the language of the element’s content. For example, let’s see the below example, we have used lang attribute in p tag, tr indicate it is a Turkish language.
<html>
<body>
<p>This is a paragraph.</p>
<p lang="tr">Bu paragraf.</p>
</body>
</html>
Dir – It simply indicates the direction, it means you can set the way the texts of the element can be read. Either from right to left or left to right. For example:
<html>
<body>
<p dir="rtl"> hi, you are learning body tag. </p>
<p dir="ltr"> hi, you are learning body tag.</p>
</body>
</html>
Now here we have mentioned “rtl and ltr”, it means the direction is right to left for first paragraph and the direction is left to right in the second paragraph. When you will run this program then you will see the result:
First paragraph results in writing from right, and you can see even (.) is placed after hi, because the sentence has been written in right to left format.
Second paragraph results in writing from left to right, which is normal for us to see.
Tips to remember
There are a few attributes for the body tag that have been deprecated in HTML 4.0 and above.
- Bgcolor
- Background
- Text
- Link
- Vlink
- Alink
Note: You can use style sheets to make your body tag presentable.
Body tag – Browser supports
The <body> tag has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Conclusion
We have learned body tags and its attribute, it is very important to understand the basics of html to make a strong foundation for you. Just practice attributes of body tag with all possible examples. Never forget that body tag is a container that will contain all the screen elements. Like h1, p, table, image and etc.