HTML <body> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <body> tag defines the main content section of an HTML document - the part of the page that is directly visible to users in a web browser. It serves as the primary container for all content elements, such as headings, paragraphs, images, links, lists, tables, forms, multimedia (like audio and video), and interactive elements like buttons and scripts. Essentially, everything that a visitor sees and interacts with on a webpage should be placed inside the <body> tag. This makes it a critical part of the HTML structure, as it separates the visual content from the metadata, styles, and scripts defined in the <head> section. By organizing content within the <body>, web developers can ensure that the page is properly structured, styled, and accessible to both users and assistive technologies.

Key Characteristics:

Single occurrence: Each HTML document can only have one <body> tag, which follows the <head> section.
Content container: It holds all visual and interactive content of the page.
Global attributes: You can use attributes like id, class, style, title, and event attributes like onload and onclick.
Styling and scripting: CSS rules can be applied to the <body> to style the entire page, and JavaScript can interact with its content for dynamic behavior.
Accessibility: Proper use of the <body> tag along with semantic HTML elements inside helps improve accessibility for screen readers and other assistive technologies.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <p>This is the main content area where all visible page elements go.</p>
        <img src="example.jpg" alt="Sample Image">
        <a href="https://www.example.com">Visit Example</a>
    </main>
    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</body>
</html>

Notes:

The <body> tag is required in all HTML documents.
It can contain both block-level and inline elements.
Styling the <body> often affects the overall look and feel of the entire page (like background color, font, and margins).

Properties

Permitted Parents: It must be the second element of an <html> element.
Content: Block, inline and text
Start/End Tags: Start tag: optional, End tag: optional

Example

HTML

<html>

  <head>

    <title>Title of the document</title>

  </head>

  <body>

    The content of the document......

  </body>

</html>

Attributes

background: Specifies the URI/URL of a background image. This attribute is now deprecated.
text: Specifies the URI/URL of a background image. This attribute is now deprecated.
link: Specifies the color of unvisited hyperlink text. This attribute is now deprecated.
alink: Specifies the color of active hyperlink text (i.e. when the user clicks on it). This attribute is now deprecated.
vlink: Specifies the color of visited hyperlink text. This attribute is now deprecated.

Global Attributes

The <body> tag also supports the Global Attributes in HTML5

Event Attributes

The <body> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <body> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.