What is the Body?

Introduction to the `<body>` Tag

The <body> tag in HTML represents the main content of a web page that is visible to the user. This is where you place all the elements that make up the page's content, such as text, images, videos, links, and other media.

Key Points

Location: The <body> tag comes right after the <head> tag and encloses all the content you want to display on your webpage.
Visibility: Everything inside the <body> tag is rendered on the screen by the browser.

Structure of the `<body>` Tag

Basic Syntax

The <body> tag typically wraps the visible content of the HTML document. Here’s a basic example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
</head>
<body>
    <div class="container">
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my webpage.</p>
    </div>
</body>
</html>

For this example, I made sure to put a divider with the class "container" because of the way I built your CSS. A lot of websites do this but not all of them do, and some might have a different name than container.

Key Elements Inside the `<body>`

Text Elements: Use elements like <h1> to <h6> for headings, <p> for paragraphs, <span> and <div> for generic content grouping. These are what you will mostly want to use.
- Example:
  <h1>Main Heading</h1> <p>This is a paragraph of text.</p>

Multimedia Elements: Include images with <img>, videos with <video>, and audio with <audio>.

Example:

<img src="image.jpg" alt="Description of image">
<video controls>
    <source src="movie.mp4" type="video/mp4">
</video>

Interactive Elements: Use elements like <a> for links, <button> for buttons, and <form> for forms to add interactivity.
- Example:
  <a href="https://example.com">Visit Example</a> <button>Click Me!</button>
Lists: Organize content with <ul> (unordered list), <ol> (ordered list), and <li> (list items).
- Example:
  <ul> <li>Item 1</li> <li>Item 2</li> </ul>

Tables: Use <table>, <tr>, <td>, and <th> to display tabular data.

Example:

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

JavaScript in the `<body>`

JavaScript can be used within the <body> tag to add dynamic behavior to the content. You can include JavaScript directly in the HTML or link to an external script file.

Inline JavaScript:

<body>
    <h1>Dynamic Page</h1>
    <script>
        document.write("Hello, World!");
    </script>
</body>

Previousmeta Nexta tag vs button tag

Last updated 1 year ago

hashtagIntroduction to the <body> Tag

hashtagKey Points

hashtagStructure of the <body> Tag

hashtagBasic Syntax

hashtagKey Elements Inside the <body>