Your First Web Page: The HTML Boilerplate Explained

The HTML boilerplate is the basic starter code every web page needs. This lesson explains each line, from <!DOCTYPE html> to <body>, so you know exactly why it is there.

What is an HTML boilerplate?

A boilerplate is standard text you reuse again and again, like the start of a formal letter. Every HTML page begins with the same few lines. Here is the modern boilerplate you should use:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Travel Blog</title>
  </head>
  <body>
    <h1>My Travel Blog</h1>
    <p>Stories and photos from my trips around the world.</p>
  </body>
</html>

Save this as index.html and open it. You will see a heading and one paragraph, and the browser tab will say "My Travel Blog". Now let's go through it line by line.

The DOCTYPE and the html element

<!DOCTYPE html>

This first line tells the browser: "This is a modern HTML document." Without it, browsers switch to an old "quirks mode" that copies bugs from the 1990s, and your page may look strange. It is not a tag, just a declaration. Always put it at the very top.

<html lang="en">

The <html> element wraps the whole page. Everything else goes inside it. It is called the root element, like the root of a tree.

The lang="en" part tells browsers and screen readers that the page is in English. A screen reader is software that reads pages out loud for people who are blind or have low vision. With the right language, it uses the correct pronunciation. Use your own language code, for example lang="es" for Spanish or lang="fr" for French.

The head: information about the page

The <head> element holds information about the page. Most of it is not shown on the screen. Think of it as the label on the outside of a parcel.

<meta charset="utf-8">

This tells the browser which character encoding to use. Character encoding is the system that turns the computer's numbers into letters. UTF-8 includes almost every letter and symbol in the world, from é and ñ to emoji. Without it, you might see strange symbols instead of accented letters. Put it near the top of the head.

<meta name="viewport" ...>

This line is for phones and tablets. Without it, mobile browsers pretend the screen is a wide desktop and shrink the page, so the text becomes tiny. With width=device-width, initial-scale=1, the page uses the real width of the device.

<title>

The text in <title> appears in the browser tab, in bookmarks, and as the blue clickable headline in search results. Make it short and clear, and describe the page. "Home" is a weak title. "Lina's Bakery – Fresh Bread in Leeds" is a strong one.

Tip: Every page on your site should have a different title. Search engines and users both use it to tell your pages apart.

The body: what people see

The <body> element holds all the visible content: headings, paragraphs, images, links and more. There is only one body per page, and it comes after the head.

Here is the same boilerplate with a bit more content in the body:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lina's Bakery – Fresh Bread in Leeds</title>
  </head>
  <body>
    <h1>Lina's Bakery</h1>
    <p>We bake sourdough, rye and seeded loaves every morning.</p>
    <p>Open Tuesday to Sunday, 7 am to 2 pm.</p>
  </body>
</html>

You will see the bakery name as a heading and two paragraphs below it. Notice how the indentation (the spaces at the start of lines) shows what is inside what. Browsers don't need it, but it makes your code much easier for humans to read.

Common mistake: Putting visible content like headings inside <head>. The browser will try to move it into the body, but it is wrong and confusing. Visible content always goes in <body>.

Practice exercise

Create a new file called about.html with the full boilerplate. Give it the title "About Me" and add one heading and two paragraphs about yourself in the body. Open it and check that the tab shows "About Me".

Hint: copy the first example, then change only the title and the text inside the body.

Key takeaways

• Start every page with <!DOCTYPE html> so browsers use modern rules.
• <html lang="en"> wraps the page and sets its language.
• The <head> holds page information: charset, viewport and <title>.
• The <body> holds everything visitors actually see.