2.7
A valid HTML document

Some boilerplate

Up until now, we’ve been looking at isolated snippets of HTML code. But an HTML document (or webpage, it means the same thing) requires a specific structure in order to be valid.

Why do we care about validating an HTML document?

correct: a valid document is correctly displayed by the browser

debugging: invalid HTML code can trigger bugs hard to target

maintenance: a valid document is easier to update later, even by someone else

Doctype

The first information to provide is the type of HTML document we’re writing: the Doctype.

Think of the doctype as the version of a car throughout the years: a Ford Fiesta bought in 1986 was a Fiesta 2. If you buy one today, it’s a Fiesta 7.

There used to be multiple versions of HTML coexisting (XHTML and HTML 4.01 have been competing standards). Nowadays, HTML 5 is the norm.

To tell the browser that the HTML document is an HTML 5, just start your document with the following line:

<!DOCTYPE html>

That’s it. Just set it and forget it.

You may wonder why this HTML 5 doctype doesn’t mention the number “5”. The W3C thought the previous doctype definitions were too confusing and took the opportunity to simplify it by removing any mention of the HTML version.

The <html> element

Apart from the doctype line, all your HTML document must be wrapped inside an <html> element:

<head>

The same way attributes carry additional information for an HTML element, the <head> element carries additional information for the whole webpage.

For example, the title of the page (displayed on the tab) is located in the <head>:

<head><title>My fabulous blog</title></head>

Other HTML elements can appear in the <head>, and only in the <head>:

<link>

<meta>

<style>

<body>

While the <head> only contains metadata not meant to be displayed anywhere (apart from the <title>), the <body> element is where we write all our content. Everything inside the <body> will be displayed in the browser window.

A complete valid HTML document

Combining all these requirements, we can write a simple and valid HTML document: