Contents
HTML body Tag: Main Tips
- HTML
<body>
element holds the content of web pages. - In HTML documents, the
<body>
element must go immediately after <html>.
Use and Purpose of body
HTML <body>
tag defines the container HTML, holding the contents of an document.
<body>
<h1>Hello World</h1>
<p>This is the main part of your document.</p>
</body>
Such an HTML document is defined by <html> element, which has two child elements: the <head> and the <body>
.
Tip: the <body> HTML element is a suitable location to place all the CSS, modifying the HTML document - background and text colors, fonts, etc.

- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion

- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Available Attributes
onFocus
It specifies a function to invoke after the document receives focus.
<body onFocus="function">
onLoad
It sets a function to call after the HTML document loads.
<body onLoad="function">
onUnload
It indicates a function for when users close the HTML document.
<body onUnload="function">
Deprecated Attributes in HTML5
alink
It sets active link text color.
Instead use :active
selector and CSS property color
. Learn how in the CSS Selector and CSS color tutorials.
<body alink="yellow">
<h1>HTML Body Tag Example</h1>
<p>The link to <a href="https://www.bitdegree.org/">the best way to learn programming</a>.</p>
</body>
background
It sets a background image for a document.
Instead use CSS property background-image
. Learn how in the CSS Backgrounds tutorial.
<body background="doggo.png">
<h1>HTML Body Tag Example</h1>
<p>The background attribute sets a background image for this document.</p>
</body>
bgcolor
It specifies a background color for a document.
Instead use CSS property background-color
. Learn how in the CSS Backgrounds tutorial.
<body bgcolor="lime">
<h1>HTML Body Tag Example</h1>
<p>The bgcolor attribute sets a background color for this document.</p>
</body>
link
It indicates the text color of an unvisited link.
Instead use :link
selector and CSS property color
. Learn how in the CSS Selector and CSS color tutorials.
<body link="indigo">
<h1>HTML Body Tag Example</h1>
<p>The link to <a href="https://www.bitdegree.org/">the best way to learn programming</a>.</p>
</body>
text
It specifies text color in a document.
Instead use CSS property color
. Learn how in the CSS color tutorial.
<body text="indigo">
<h1>HTML Body Tag Example</h1>
<p>The text color of this document is "Indigo".</p>
</body>
vlink
It sets visited link text color.
Instead use :visited
selector and CSS property color
. Learn how in the CSS Selector and CSS color tutorials.
<body vlink="orange">
<h1>HTML Body Tag Example</h1>
<p>The link to <a href="https://www.bitdegree.org/">the best way to learn programming</a></p>
</body>
Browser support

Chrome

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera
