HTML <body> Tag

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).