HTML Boilerplate Explained

← Understanding HTML Document Structure HTML Elements →

An HTML boilerplate is a basic template that contains the essential structure of an HTML document. Instead of creating every HTML page from scratch, developers start with this structure and then add their content.

💡 Think of it this way

Think of an HTML boilerplate as the foundation of a house. Before adding rooms, furniture, doors, and windows, you need a basic structure.

In the same way, an HTML document needs some basic elements before you start building your webpage.

Basic HTML Boilerplate

This is the basic structure you will commonly start with when creating an HTML page.

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>My Web Page</title>
</head>

<body>

    <h1>Hello World!</h1>

    <p>
        This is my first webpage.
    </p>

</body>

</html>

Let's Understand It Step by Step

Don't try to memorize everything at once. Understand what each line is responsible for.

<!DOCTYPE html>

Tells the browser that the document uses HTML5.

<html>

This is the root element of the HTML document. Everything on the page is placed inside this element.

lang="en"

Specifies that the primary language of the webpage is English.

<head>

Contains information about the webpage that is generally not displayed as normal page content.

Defines the character encoding used by the document. UTF-8 supports a large range of characters and symbols.

viewport

Helps the webpage adapt properly to different screen sizes such as mobile phones, tablets, and desktops.

<title>

Defines the title of the webpage. It is usually displayed in the browser tab.

<body>

Contains the visible content of the webpage. Headings, paragraphs, images, buttons, links, forms, and other page content normally go here.

<h1>

Creates the main heading of the page.

<p>

Defines a paragraph of text.

ℹ️ Important: The boilerplate is not the complete webpage. It is the basic starting structure that you can build upon.

Complete Example

Now let's put the basic structure together with some actual content.

index.html

📝 Edit Code

👁 Live Preview

💡 Edit the code on the left and click Run to see the result instantly!

What Should You Remember?

✅ Simple rule: Start your HTML pages with a basic boilerplate, then place the webpage content inside the <body> element.

HTML Boilerplate Summary

DOCTYPE

Defines the HTML document type.

html

Root element of the document.

head

Contains document metadata.

title

Defines the browser page title.

body

Contains visible webpage content.