HTML Website Structure: Basic HTML Document Explained

Introduction

• Every HTML page follows a basic structure.
• This structure tells the browser how to display the content.
• Without it, the webpage may not work correctly.

This basic HTML page structure is also known as an HTML skeleton or HTML boilerplate template.

In this lesson, you will learn the basic structure of an HTML document and understand what each part does.

What You’ll Learn in This Lesson

• Basic structure of an HTML document
• Purpose of <!DOCTYPE html>
• Meaning of <html>, <head>, and <body>
• Where content is placed in HTML

Basic HTML Document Structure (HTML Boilerplate)

The basic HTML structure is sometimes called the HTML boilerplate or HTML skeleton.

It is the standard starting template used to create every HTML webpage.

Developers usually start every project using this basic structure:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is my first webpage.</p>
</body>
</html>

Explanation of Each Part

🔹 <!DOCTYPE html>

• Tells the browser this is an HTML5 document
• Must be written at the top of the file

🔹 <html>

• The root element of the webpage.
• Everything inside the webpage is inside this tag.

🔹 <head>

• Contains page information
• Not visible on the web page
• Commonly used for:
  • Page title
  • Meta information
  • CSS links (later)
  • Scripts (later)

🔹 <title>

• Sets the title of the web page
• Appears in the browser tab

🔹 <body>

• Contains everything visible on the webpage.
• Text, images, links, forms, etc.

Why HTML Structure Is Important

Every HTML page must follow a proper structure so that browsers can understand and display the content correctly.

A correct HTML structure helps:

• Browsers render the page properly
• Search engines understand the webpage
• Developers keep the code organized

Even a simple webpage should follow the standard HTML structure.

Basic Structure Diagram

This diagram helps you understand the basic structure of an HTML document.

HTML Document
│
├── head
│   └── title
│
└── body
    ├── headings
    ├── paragraphs
    └── images

How to Create Your First HTML Page

You can follow these steps to create your first HTML page.

• Step 1: Open Notepad or any code editor
• Step 2: Copy the HTML structure
• Step 3: Save the file as index.html
• Step 4: Open it in a browser

How the Output Looks in the Browser

When you open the HTML file in a web browser, the output will look like this:

Output:

What Happens When You Open the File?

When you open the HTML file in a browser, the browser reads the HTML code from top to bottom and displays the content inside the <body> tag.

The <h1> tag appears as a large heading, and the <p> tag appears as normal paragraph text.

Everything inside the <body> section is visible on the webpage.

Important Rules to Remember

Remember these important rules:

• The HTML document should always start with <!DOCTYPE html>
• HTML tags usually come in pairs
• Tags must be properly closed
• Structure should be followed for every page
• File should be saved with .html extension

Common Beginner Mistakes

• Forgetting <!DOCTYPE html>
• Writing content outside <body>
• Not closing tags properly
• Misspelling tag names

FAQs

Practice Tasks

Now that you understand the basic structure of an HTML document, try the following exercises to test your knowledge.

Try the following practical tasks to test your understanding of the HTML structure.

Task 1: Create Your First HTML Page

Create an HTML file with the basic structure and display the following text in the browser:

• Heading: My First Website (Use <H1></h1>)
• Paragraph: I am learning HTML on DivPHP Tutorials. (Use <P></P>)

Task 2: Change the Page Title

Modify the <title> tag of your HTML document.

Set the page title to:

HTML Practice Page

Then open the file in your browser and check the title in the browser tab.

Task 3: Add Another Paragraph

Inside the <body> section, add another paragraph below the first one with the text:

HTML is easy to learn.

Task 4: Add Two Headings

Inside the <body> tag, add:

• One <h1> heading
• One <h2> heading

Example text:

<h1>Welcome to HTML</h1>
<h2>This is my practice page</h2>

Open the file in your browser and see how the headings appear.

Notes

🔹 HTML Tags Are Not Case-Sensitive

HTML tags are not case-sensitive. This means you can write tags in uppercase or lowercase.

For example, the following tags will work in the same way:

<h1>Hello</h1>

<H1>Hello</H1>

However, it is recommended to use lowercase tags, because this is the modern HTML coding standard.

🔹 About the Practical Tasks

The practical tasks in this lesson are basic exercises to help you understand the HTML structure.

In the upcoming tutorials, you will learn these elements in more detail, including headings, paragraphs, images, and other HTML tags.

In the next tutorial, we’ll learn about HTML Headings & Paragraphs.