HTML <body> Tag

Definition and Usage

<body> The tag defines the main content of the document.

The metadata and document information of the HTML document are wrapped in the head element, and the content of the document is wrapped in the body element.

The body element always follows the head element, and it is the second child of the html element.

<body> The element contains all the content of the HTML document, such as titles, paragraphs, images, hyperlinks, tables, lists, and so on.

Note:There can only be one <body> Element.

Example

A simple yet complete HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Document Title</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Try It Yourself

Tip:More examples are provided at the bottom of the page.

Global Attributes

<body> The tag also supports Global Attributes in HTML.

Event Attributes

<body> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will use the following default values to display <body> Element:

body {
  display: block;
  margin: 8px;
}
body:focus {
  outline: none;
}

Try It Yourself

More examples

Example 1

Add a background image to the document (using CSS):

<html>
<head>
<style>
body {
  background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="">Visit codew3c.com!</a></p>
</body>

Try It Yourself

Example 2

Set the background color of the document (using CSS):

<html>
<head>
<style>
body {
  background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.codew3c.com">Visit codew3c.com!</a></p>
</body>

Try It Yourself

Example 3

Set the text color of the document (using CSS):

<html>
<head>
<style>
body {
  color: green;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>This is a paragraph.</p>
<p><a href="">Visit codew3c.com!</a></p>
</body>
</html>

Try It Yourself

Example 4

Set the color of unvisited links in the document (using CSS):

<html>
<head>
<style>
a:link {
  color:#0000FF;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML Tutorial</a></p>
</body>
</html>

Try It Yourself

Example 5

Set the color of active links in the document (using CSS):

<html>
<head>
<style>
a:active {
  color:#00FF00;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML Tutorial</a></p>
</body>
</html>

Try It Yourself

Example 6

Set the color of visited links in the document (using CSS):

<html>
<head>
<style>
a:visited {
  color:#FF0000;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">HTML Tutorial</a></p>
</body>
</html>

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support