Head vs. Body.

An HTML document is split into two distinct zones: the Head (for the brain/settings) and the Body (for the eyes/content).

The Essentials

The <head> is for metadata, scripts, and styles (stuff you don't see).

The <body> is for all visible elements like text, images, and links.

There can be only one <head> and one <body> per document.

The <title> tag inside the <head> is what appears in the browser tab.

External CSS and Fonts are linked inside the <head>.

Content in the <head> is ignored by the visual rendering of the page.

The <head> is the primary place for SEO metadata. Tags like <meta name='description'> tell Google what your page is about.

Loading large styles in the <head> is standard, but loading large scripts in the <head> can slow down the initial page render.

The <meta charset='UTF-8'> tag should always be near the top of the <head> to ensure special characters (like emojis) display correctly.

Everything from the first <h1> to the final <footer> must live inside the <body>. Putting these in the <head> is a major structural error.

Putting <img> or <h1> tags inside the <head>.

Forgetting the <title> tag, which is required for a valid document.

Closing the <head> tag too late (after the <body> starts).

Putting <meta> tags inside the <body>.

Move the <title> tag into the correct section

Move the <h1> tag into the correct section

Loading editor...

Production Preview