Explanation of the minimal code of an HTML document

NicolasBrondinBernard

If you were told "we'll deal with it later," then that day has arrived!

Article published on 04/08/2021, last updated on 10/08/2026

It is not uncommon that when you begin learning the web (usually HTML and CSS), you are spared from understanding the minimal HTML file needed for the browser to interpret it as a web document.

Well today is the time to dive together into these few lines and understand their purpose, how they work, and their impact. To begin, let's take our minimal reference file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML Example document</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="favicon.ico"/>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

The doctype

The first thing to know is that the HTML format is actually a specification based on another language called XML:

<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

XML is an extensible markup language, which means you can create as many tags as you want for the needs of your application (here a notes management system).

But to verify that the format of the data written in the file actually matches what the application expects, it is necessary to attach a reference schema to it, this format is called DTD for "Document Type Definition".

Its purpose will be, for example, to indicate that each must be composed of exactly one sender , one recipient , etc...

And as you can see, the format used to link an XML document to its DTD file is done with the DOCTYPE tag, as in our HTML document.

In our web page, the "Document Type Definition" simply indicates that the browser must refer to the schema of the latest HTML version in effect in order to confirm that all the tags used are valid and correctly used.

The root element

<html lang="en">
...
</html>

As seen previously, every HTML document must be a valid XML document, and one of the characteristics of an XML document is to have a root element (and only one).

This is the entry point of the document, the one through which the interpreter will start browsing the document, in this case for a web page this must be called , and it can contain certain attributes, the main one being the document's language.

The header

<head>
...
</head>

The header of a web page has a very particular role because it contains all the information and files that must be loaded first.

This means that if you include files that are too heavy directly in the document's header, then your page will only start displaying once the entire header has been loaded, and not before.

It is in the header that we will find all the metadata of the page:

Metadata

"Meta-data" (or metadata) is data that describes the document itself. For example, in the metadata of a text document you might find the file name, the author's name, the creation date, etc...

A lot of information that may not necessarily be useful to you when reading the file, but that could be useful for other purposes.

Well, for a web document, it's the same thing. The first metadata we will find is its title:

<title>HTML Example document</title>

By the way, you can see that it is loaded before everything else, since it appears in the browser tab title before the page appears

But also other metadata such as character encoding, the size and behavior of the viewport, and plenty of other things:

...
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
...

There are dozens of different metadata, some of which are for displaying your links on social networks for example:

Comment personnaliser le partage de votre site sur les réseaux sociaux avec OpenGraph - Nicolas Brondin-Bernard

Note that metadata plays an essential role in search engine optimization (SEO), you can find all the other metadata in the official Mozilla Developer Network documentation!

Links

In parallel with the loading of metadata, the and