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
.htmlextension
Common Beginner Mistakes
- Forgetting
<!DOCTYPE html> - Writing content outside
<body> - Not closing tags properly
- Misspelling tag names
FAQs
What is the root element in HTML?
The <html> tag is the root element that contains the entire webpage.
Is the <head> tag visible on the webpage?
No, it contains metadata like title, CSS, and scripts.
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.