What is the difference between head and body?

[HTMLCodeRunner Editorial]

A page title is visible in the tab, but a paragraph placed in head appears in an unexpected location.

[HTMLCodeRunner Editorial]

Detailed answer

The head contains metadata and resource references.

The body contains the page content people read and interact with. Put title, charset, and stylesheet links in head, then headings, navigation, forms, and articles in body. Browser error recovery can relocate invalid markup, so inspect the parsed DOM when debugging.

Example

<head><meta charset="utf-8"><title>Structure</title></head>
<body><h1>Visible content</h1><p>A paragraph.</p></body>

Understanding the behavior

A document can have useful metadata that never appears as page text. Stylesheet links and title information belong in head; navigation and the main article belong in body. Keeping that separation makes source code predictable.

Practical implementation notes

Use the Elements panel to inspect the browser's repaired document. A browser displaying something does not prove that the original placement is valid; validate the source as well.

How to check it

Move the paragraph into body and compare the Elements panel with the original source.

Expected result

Visible prose belongs in body; the tab title remains metadata.

Watch out: View Source and the parsed DOM can differ after error recovery.

Read the reference ↗

[Author]

Posts