REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<body>

AI & DATA SCIENCE // body-tag

The <body> element contains all the visible content of an HTML page — text, images, forms, and every other element a visitor actually sees.

Syntax

<body>
  <h1>Title</h1>
  <p>Visible paragraph.</p>
</body>

Deep Dive Course

**`<body>`** is the second (and last) child of `<html>`, right after `<head>`, and it holds everything rendered on the page: headings, paragraphs, images, forms, and interactive elements. There is exactly one `<body>` per document. Global event handlers like `onload` are sometimes attached to `<body>`, though modern code prefers `addEventListener` in a script.

1Understanding <body>

`<body>` is the second (and last) child of <html>, right after <head>, and it holds everything rendered on the page: headings, paragraphs, images, forms, and interactive elements. There is exactly one <body> per document. Global event handlers like onload are sometimes attached to <body>, though modern code prefers addEventListener in a script.

💡

CSS resets often target <body> directly (e.g. margin: 0) because browsers apply a small default margin to it that causes unexpected gaps at the edges of the page.

editor.html

<body>
  <header><h1>My Blog</h1></header>
  <main>
    <p>Welcome to my blog.</p>
  </main>
  <footer>© 2026</footer>
</body>

localhost:3000

2Practical Example

Here is a real-world application of <body> showing how it is used in production HTML.

editor.html

<!-- Scripts placed at the end of body run after content is parsed -->
<body>
  <p>Content loads first...</p>
  <script src="/app.js"></script>
</body>

localhost:3000

3Best Practices

Follow these guidelines when working with <body>:

1. Keep <body> to actual visible/interactive content — metadata belongs in <head>

2. Structure content with semantic elements (<header>, <main>, <footer>) inside <body> instead of only <div>s

3. Load your main JavaScript bundle right before the closing </body> tag (or use defer) so it doesn't block rendering

⚠️

Tip: CSS resets often target <body> directly (e.g. margin: 0) because browsers apply a small default margin to it that causes unexpected gaps at the edges of the page.

editor.html

<body>
  <header><h1>My Blog</h1></header>
  <main>
    <p>Welcome to my blog.</p>
  </main>
  <footer>© 2026</footer>
</body>

localhost:3000

Examples

Example 01Basic Usage

<body>
  <header><h1>My Blog</h1></header>
  <main>
    <p>Welcome to my blog.</p>
  </main>
  <footer>© 2026</footer>
</body>

Example 02Advanced Example

<!-- Scripts placed at the end of body run after content is parsed -->
<body>
  <p>Content loads first...</p>
  <script src="/app.js"></script>
</body>

Best Practices

Keep to actual visible/interactive content — metadata belongs in
Structure content with semantic elements (
,
,
) inside instead of only
s
Load your main JavaScript bundle right before the closing tag (or use defer) so it doesn't block rendering

Interview Question

Why is it common practice to place <script> tags at the end of <body>?▼

Hint: Think about how the browser parses HTML top-to-bottom and what blocks rendering.

By default, a <script> tag pauses HTML parsing while it downloads and executes. Placing scripts at the end of <body> lets the browser render all the visible content first, so the page feels faster and the script can safely query DOM elements that are already parsed. The modern alternative is the `defer` attribute in <head>, which downloads the script early but still executes it only after parsing finishes.

Exercises

EasyPractice using <body> in a real scenario.

View Solution

<body>
  <header><h1>My Blog</h1></header>
  <main>
    <p>Welcome to my blog.</p>
  </main>
  <footer>© 2026</footer>
</body>

Frequently Asked Questions

Why is it common practice to place <script> tags at the end of <body>?▼

By default, a