2.4 The BODY Element | HTML

The <body> element is a fundamental part of an HTML document. It contains all the content that is displayed to users, such as text, images, links, forms, and other media. Everything inside the <body> tag is visible on the web page.

Basic Structure of the <body> Element

The <body> element is placed immediately after the closing </head> tag and before the closing </html> tag. Here's a basic example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first paragraph of text.</p>
</body>
</html>

Common Elements Inside <body>

1. Headings

Headings are used to create a hierarchical structure for the content, ranging from <h1> (the highest level) to <h6> (the lowest level).

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

2. Paragraphs

The <p> element is used to define a paragraph of text.

<p>This is a paragraph.</p>

3. Links

The <a> element defines a hyperlink, which is used to link from one page to another.

<a href="https://www.example.com">Visit Example</a>

4. Images

The <img> element is used to embed images.

<img src="image.jpg" alt="Description of image">

5. Lists

There are two types of lists: ordered (<ol>) and unordered (<ul>).

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

6. Tables

The <table> element is used to create tables.

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

7. Forms

Forms are used to collect user input.

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

Attributes of <body>

The <body> element can have various attributes, including:

    bgcolor: Sets the background color of the document. (Deprecated in HTML5; use CSS instead)

<body bgcolor="lightblue">

    • background: Sets a background image for the document. (Deprecated in HTML5; use CSS instead)

<body background="background.jpg">

    • style: Adds inline CSS styles.

<body style="background-color: lightblue; color: darkblue;">

    • class and id: Used for applying CSS styles and JavaScript functionality.

<body class="main-body" id="home-page">

Example of a More Complex <body>

Here’s an example of a more comprehensive <body> section, demonstrating various elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                  <li><a href="#home">Home</a></li>
                  <li><a href="#about">About</a></li>
                  <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Home</h2>
              <p>This is the home section.</p>
              <img src="home.jpg" alt="Home Image">
        </section>
        <section id="about">
            <h2>About</h2>
              <p>This is the about section.</p>
        </section>
        <section id="contact">
            <h2>Contact</h2>
              <form action="/submit" method="post">
                  <label for="name">Name:</label>
                  <input type="text" id="name" name="name">
                  <label for="email">Email:</label>
                  <input type="email" id="email" name="email">
                  <input type="submit" value="Submit">
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

    • <header>: Contains introductory content or navigational links.

    • <nav>: Contains the navigation menu.

    • <main>: Represents the main content of the document.

    • <section>: Defines sections within the main content.

    • <footer>: Contains footer information.

Summary

The <body> element is the heart of an HTML document, containing all the visible content. Understanding how to structure and utilize various elements within <body> allows you to create comprehensive and user-friendly web pages.

By incorporating headings, paragraphs, images, links, forms, and other media, you can build a rich and interactive user experience.

To learn more about HTML, click here: HTML

I am a passionate writer. Read more.

Post a Comment

Don't spam links or promote stuff in the comments. It's annoying and lowers the conversation quality. Contribute respectfully and helpfully instead.