HTML Element: body

The <body> element in HTML is used to define the main content of an HTML document. A webpage’s visible content is typically contained within the <body> element.

The <body> element can be styled using CSS to change the appearance of the content contained within it. This is a great way to do a blanket reset or foundational styling of a web page.

Syntax

The <body> element typically follows the <head> element. They are “siblings”, and the two principal child elements of the <html> element.

Here’s the typical syntax:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Visible content goes here -->
  </body>
</html>

Example

Here’s an example of a simple HTML document that uses the <body> element to define the main content of the page:

<!DOCTYPE html>
<html>

  <head>
    <title>My Page</title>
  </head>

  <body>
    <header>
      <h1>Welcome to My Page</h1>
      <nav>
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">About Us</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>About Us</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel enim vel nisl scelerisque convallis. Sed vel tellus vitae est sagittis eleifend. Duis euismod malesuada arcu id blandit.
      </p>
      <h2>Contact Us</h2>
      <p>
        123 Example St<br />Theville, XX 12345<br />Phone: 555-555-5555<br />Email:
        example@example.com
      </p>
    </main>
    <footer>
      <p>&copy; 2023 Some Company. All rights reserved.</p>
    </footer>
  </body>

</html>

In this example, the <body> tag contains the page’s header, main content, and footer.

Deprecated Attributes

The HTML <body> element historically has several attributes for specifying additional information about the element.

These attributes have been deprecated in favor of CSS styling, and should no longer be used.

bgcolor: specifies the background color of the page.
text: specifies the default text color for the page.
link: specifies the color of unvisited links on the page.
vlink: specifies the color of visited links on the page.
alink: specifies the color of active links on the page.

Content

The <body> element can contain a wide variety of content, including headings, paragraphs, lists, images, videos, and more. It is typically used to define the main content of a webpage.

Did You Know?

The <body> tag is required in every HTML document, as it contains the page’s visible content.
The content of the <body> element can be changed dynamically using JavaScript.
Set the <body> tag’s contenteditable attribute to true and you can edit its content directly in the browser. The perfect notepad! Check out the following example:

Learn More

Official W3C specification <body>