Skip to main content

Anatomy of a HTML Page

· 2 min read
Luke Owen
Luke Owen
Lead Front End Developer @ Lunio

There are loads of HTML elements, and each new specification introduces more.

These five are the most basic and important ones, without them a document is not considered valid HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>lorem</title>
  </head>
  <body>
    ...
  </body>
</html>

An important thing to remember about these tags is that you can only have ONE of each per page.

Let's break it down:

<!DOCTYPE html>​

The DOCTYPE declaration tells the browser what type of document this is, every HTML page should have one.

It’s not a tag so it doesn’t need to be closed, but it must be the first thing in the document – at the very top. The DOCTYPE is case insensitive, but conventionally the first part is uppercased.

For HTML5 (which most webpages should be), the following DOCTYPE is used:

<!DOCTYPE html>

<html>​

This wraps all HTML content on the page, all of your code should go inside it. As the root element, the CSS rem unit value comes from this element.

The html element will only have two children, the head and body elements.

The head tag contains all the information about the page that the browser needs but not the user. It includes your meta tags, CSS styles, and the page title

<title>​

This sets the title for the webpage. It appears on the pages tab in the browser, as well as in search results. This means it’s an important tag for accessibility and SEO.

It must be placed inside the head element.

<body>​

This contains the content for the page, everything you want the user to see should be in here. So that’s all of your text, links, images etc.

Browsers can also see the content of the body tag, and its content will be indexed and displayed on search engines (hopefully).