The HTML <body> element contains all the visible content of an HTML document. There can only be one <body> area per HTML document.

What is the HTML <body> tag and what is it used for?

HTML <body> is an HTML element that is used to display the content of a document to users. All visible content such as headlines, text blocks, images, tables, hyperlinks, lists and other elements are stored within this HTML tag. There can only be one HTML <body> in each document. This is always located below the <head> area and above the HTML footer. The <body> tag supports all global HTML attributes.

Web Hosting
Fast, scalable hosting for any website
  • 99.9% uptime
  • PHP 8.3 with JIT compiler
  • SSL, DDoS protection, and backups

What is the syntax and functionality of HTML <body>?

Before we show you how HTML <body> works using a few simple examples, it’s worth taking a look at the basic syntax of the element. This looks as follows:

<body>This is where all the visible website content is stored.</body>
html

Only content between the introductory (<body>) and closing (</body>) tags will be displayed later on the relevant web page.

HTML <body> examples

In the following examples, you can see how the HTML <body> tag is used in practice.

HTML document with simple <body> element

First, we’re going to create a simple HTML document with a headline, a text section and an image, all of which are placed within the body. This is the corresponding code:

<html>
<head>
<title>HTML body in a document</title>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
<img src="example.jpg" alt="Here’s an image">
</body>
</html>
html

Creating a navigation bar with href

The following example shows you how to create a navigation bar for your website using the HTML <body> tag and the href attribute. Here’s the code:

<!DOCTYPE html>
<html>
<head>
<title>Website with a navigation bar</title>
</head>
<body>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Contact</h2></section>
</body>
</html>
html

Embedding video via the HTML <body> tag

If you want to embed a video on your website, the <body> section is the correct (and only) place to do so. Below is an example of how to embed a video:

<!DOCTYPE html>
<html>
<head>
<title>Website with a video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="example-film.mp4" type="video/mp4">
</video>
</body>
</html>
html

Changing the design of content via HTML <body> tag

With the help of CSS, you can also use the <body> area to customize the design of your web content. You can see how this works in the following example:

<!DOCTYPE html>
<html>
<head>
<title>HTML body with visual adjustments</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
</body>
</html>
html

Customizing backgrounds in HTML <body>

If you want to change your HTML background with CSS, you can also do so in the HTML <body>. Here’s how to set the background color:

<!DOCTYPE html>
<html>
<head>
<title>HTML body with new background color</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
</body>
</html>
html

To insert an image, use the code below:

<!DOCTYPE html>
<html>
<head>
<title>HTML body with new background image</title>
<style>
body {
background-image: url(example.png);
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
</body>
</html>
html
Domain Name Registration
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers
  • Free private registration for more privacy
  • Free 2 GB email account
Was this article helpful?
Go to Main Menu