The Document Body

Learn How the <body> Element Contains the Content of an HTML Document

Understanding the <body> Element

The <body> element contains the main content of an HTML document, including the headings, paragraphs, links, images, lists, forms, and other elements that make up a webpage.

Every HTML document has a document body. While the <head> contains metadata and resources that describe or support the document, the <body> contains the content and structure that form the page itself.

<body> Element Syntax

The body element has a start tag and an end tag, with the document's page content placed between them.

<body>
  Page content goes here.
</body>

Most of the HTML elements used to build the visible structure and content of a webpage are placed somewhere inside the body element.

Where to Place the <body> Element

The body element is a child of the root html element and follows the document's head element.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Webpage</title>
  </head>
  <body>
    <h1>My Webpage</h1>
    <p>Welcome to my webpage.</p>
  </body>
</html>

An HTML document has one document head followed by one document body. Together they form the two primary parts contained by the html element.

Content Inside the <body> Element

The document body can contain many different types of HTML content. These elements provide the structure, meaning, and functionality of the webpage.

Common examples include:

  • Headings and paragraphs.
  • Links and navigation.
  • Lists and tables.
  • Images, audio, and video.
  • Sections, articles, headers, footers, and other structural elements.
  • Forms, buttons, and other interactive controls.
  • Scripts and other elements permitted within the document body.

These elements can also contain other elements, creating the nested hierarchy that forms the structure of the document.

Document Head vs Document Body

The document head and document body serve different purposes even though both are contained by the root html element.

Document Head

The head contains metadata and supporting information about the document.

<head>
  <meta charset="utf-8">
  <title>My Webpage</title>
  <link rel="stylesheet" href="/css/styles.css">
</head>

Document Body

The body contains the document's page content and structure.

<body>
  <h1>My Webpage</h1>
  <p>Welcome to my webpage.</p>
</body>

A simple way to remember the distinction is that the head primarily contains information about or supporting the document, while the body contains the document content itself.

Structuring the Document Body

A document body is usually made from multiple HTML elements organized into a meaningful hierarchy rather than one large collection of unrelated content.

<body>
  <header>
    <h1>My Website</h1>

  </header>
  <main>
    <section>
      <h2>About Us</h2>
      <p>Information about our website.</p>
    </section>
  </main>
  <footer>
    <p>Copyright information</p>
  </footer>
</body>

Elements such as header, main, section, and footer can help describe the purpose and organization of different parts of the page.

The indentation also provides a visual representation of the HTML hierarchy, making it easier to see which elements are contained within other elements.

Text Content

Headings, paragraphs, lists, quotations, and other text-related elements are placed inside the document body.

<body>
  <h1>Learning HTML</h1>
  <p>HTML provides the structure for webpage content.</p>
  <h2>Topics to Learn</h2>
  <ul>
    <li>HTML elements</li>
    <li>HTML attributes</li>
    <li>Links and images</li>
  </ul>
</body>

Choosing HTML elements according to the meaning and purpose of the content helps create a document that is easier for browsers, assistive technologies, search engines, developers, and users to understand.

The document body can contain hyperlinks and media such as images, audio, and video.

<p>
  Visit the
  <a href="https://www.example-web.site">Example Web website</a>.
</p>
<img src="/images/example.jpg" alt="Example image">

These elements become part of the page content and can be combined with headings, paragraphs, figures, sections, and other HTML elements to build the document.

Interactive Content

The document body can also contain elements that allow users to interact with the webpage, including links, buttons, and form controls.

<form action="/contact" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Send</button>
</form>

HTML provides the structure and built-in behavior for many interactive controls. CSS can change their presentation, while JavaScript can add additional behavior when it is needed.

Attributes on the <body> Element

The body element supports global attributes such as id, class, and data-*.

<body class="home-page">
  <h1>Home</h1>
</body>

A class on the body element can be useful when a page needs styles or other behavior that differs from other pages on the same website.

The body element also supports certain event handler attributes, but keeping JavaScript behavior in scripts rather than inline event attributes generally produces cleaner and more maintainable HTML.

Complete HTML Document

The following example brings together the major document structure elements covered throughout this section:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Webpage</title>
    <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body>
    <header>
      <h1>My Website</h1>
    </header>
    <main>
      <section>
        <h2>Welcome</h2>
        <p>Welcome to my website.</p>
        <p>
          Visit
          <a href="https://www.example-web.site">Example Web</a>
          to learn more.
        </p>
      </section>
    </main>
    <footer>
      <p>Copyright information</p>
    </footer>
  </body>
</html>

The doctype identifies the document as modern HTML, the html element creates the document root, the head contains metadata and supporting resources, and the body contains the page's content and structure.

Common <body> Element Mistakes

Most document body problems result from placing elements in the wrong part of the document or creating an incorrect HTML hierarchy.

  • Placing visible page content inside the head instead of the body.
  • Creating more than one body element in a document.
  • Placing the body outside the root html element.
  • Placing the body before the document head.
  • Nesting elements incorrectly inside the document body.
  • Using generic containers when a more meaningful HTML element better describes the content.
  • Using HTML elements primarily to control appearance instead of using CSS for presentation.

Keeping the document hierarchy clear makes HTML easier to understand, troubleshoot, style, and maintain.

<body> Element Best Practices

A well-organized document body provides a clear structure for the webpage and makes the HTML easier to maintain as the page grows.

  • Use one body element for the document's page content.
  • Place the body after the head within the root html element.
  • Choose HTML elements according to the meaning and purpose of the content.
  • Nest elements correctly to maintain a logical document hierarchy.
  • Use consistent indentation to make nesting relationships easy to recognize.
  • Use CSS for presentation instead of choosing HTML elements based on their default appearance.
  • Use JavaScript when additional behavior is needed rather than relying on it unnecessarily for basic document content.

Starting with a meaningful HTML structure creates a strong foundation for the CSS, JavaScript, accessibility, and responsive design that can be added later.

Summary

The body element contains the content and structure that make up an HTML webpage. Headings, paragraphs, links, images, lists, forms, structural elements, and many other types of content are organized within the document body.

The body follows the document head and is contained by the root html element. Together with the document head, it completes the basic structure of an HTML document and provides the foundation on which the rest of a webpage is built.

See Also:
The HTML Document Root
The Document Head
Nesting Elements
HTML Div & Span

« Previous HTML Home