HTML Page Structure

Every web page, however simple or elaborate, shares the same skeleton. The file starts with a doctype line, then a single html tag wraps everything else. Inside that wrapper sit two parts: the head and the body. Learn these four pieces and you can make sense of any page on the web, because they never change.

The doctype is the first line of the file and it is not a tag that displays content. It tells the browser to follow modern HTML rules. Leave it out and the browser may fall back to an older way of rendering called quirks mode, where pages behave unpredictably. Always keep the doctype at the very top, before anything else.

The head holds everything visitors do not see: the title in the browser tab, the character set, links to CSS files, and other settings. The body holds everything visitors do see: headings, paragraphs, images, and buttons. If you open a page source and wonder what a piece does, ask yourself which side of the html tag it sits in.

What goes in the head

Two tags belong in almost every head. The meta charset tag sets the character set, and UTF-8 handles letters with accents and emoji correctly. The title tag sets the text in the browser tab, and search engines use it to understand your page, so give every page a clear title. Stylesheets and other settings join them as your pages grow.

<head>
  <meta charset="UTF-8">
  <title>My page</title>
</head>

What goes in the body

The body holds everything visible on the page. It can contain hundreds of tags, but the same rule always applies: keep them inside the body element. Anything placed after the closing body tag may be ignored by the browser or rendered in an unexpected spot.

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

Syntax

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page title</title>
  </head>
  <body>
    <p>Visible content.</p>
  </body>
</html>

<!-- Don't do this - looks ok but DOM is auto-fixed -->
Title only