The Boilerplate: DOCTYPE, html, head, and body
The Boilerplate: DOCTYPE, html, head, and body
~9 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026
In the last chapter, our file consisted of just a single line, and that worked fine. But real HTML files have a fixed boilerplate structure that goes at the top of every page. You'll learn that now - and from here on, we'll always use it.
The complete boilerplate
Replace the entire content of your index.html with this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Finn's Football Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
</body>
</html>Save and reload the page in your browser. Visually, nothing changes - you still see just the heading. But now look at the browser tab title at the top: it now says "Finn's Football Website" instead of an empty tab or the file name. That was the <title>.
What each line means
Let's go through the new lines one by one:
<!DOCTYPE html>: the very first line of every HTML file. It tells the browser: "this is a modern HTML page." Without this line the browser might behave in an outdated mode. From now on you'll simply write this line first, every time, without thinking about it further.<html lang="en">...</html>: wraps the entire page. Everything that belongs to the website goes between these two tags. Thelang="en"says: "this page is written in English" - this helps, for example, screen readers for blind users and translation tools.<head>...</head>: the "head" of the page. This holds information about the page that doesn't appear directly in the browser window (the title, character encoding, later also descriptions for search engines).<meta charset="UTF-8">: tells the browser which character encoding is used, so that special characters and accented letters display correctly. UTF-8 is today's standard - this always just goes in unchanged.<title>...</title>: the text shown in the browser tab, and also the text that, e.g., appears as the blue heading in Google's search results.<body>...</body>: the "body" of the page. This holds everything that's actually visible in the browser window: headings, text, images, links, forms. From now on, almost everything we learn goes between these two tags.
Nesting and indentation
You've probably noticed that some lines are indented further (shifted to the right with spaces) than others. This is called nesting: <head> and <body> are inside <html>, so they're indented. The indentation doesn't matter at all to the browser - it would display the page exactly the same without any indentation. But for you as a human, indentation makes the code much easier to read, because you can see at a glance what belongs to what.
Tipp: A good rule of thumb: every time you write an opening tag and want to put more tags inside it, indent the next line by two spaces. When a tag closes again, the indentation jumps back.
Opening and closing tags
Almost every HTML element consists of an opening tag (<body>) and a closing tag (</body>) - the only difference is the forward slash /. Everything between the two tags "belongs" to that element. We'll meet a few elements later in this tutorial that don't need a closing tag (for example, for images), but most of them work exactly on this principle: open, content, close.
Achtung: A very common beginner mistake: opening a tag but forgetting to close it again, or mixing up the order when closing. Browsers do try to display even broken HTML somehow, but the result often looks strange. If your page looks odd: always check first whether every tag was really closed again.