HTML Tutorial: HTML Basic
Core structure + clear examples + colorful input & output results
In this lesson, you will learn the basic structure of every HTML page.
Every HTML document must have:
- DOCTYPE
- html
- head
- body
1️⃣ Basic HTML Structure
INPUT (Colored Code):
<!DOCTYPE html>
<html>
<head>
<title>
My First Webpage
</title>
</head>
<body>
<h1>
Welcome to HTML
</h1>
<p>
This is a basic HTML page.
</p>
</body>
</html>
OUTPUT (Browser Result):
Welcome to HTML
This is a basic HTML page.
2️⃣ Explanation of Each Part
<!DOCTYPE html>
Tells the browser this document uses HTML5.
<html>
Root element. Everything must be inside this tag.
<head>
Contains page information (not visible on page).
<title>
Shows text in browser tab.
<body>
Contains visible content (text, images, buttons).
3️⃣ Example: Adding More Content
INPUT:
<body>
<h2>
About Me
</h2>
<p>
I am learning web development.
</p>
<hr>
<p>
HTML is the foundation of websites.
</p>
</body>
OUTPUT:
About Me
I am learning web development.
HTML is the foundation of websites.
4️⃣ Important Basic Rules
- Always close your tags
- Use lowercase tags
- Indent your code properly
- Keep head and body separate
5️⃣ Mini Practice Project
Your Task:
Create a simple webpage about yourself using:
- One heading
- Two paragraphs
- One horizontal line
🎯 Beginner Tip
If something does not show:
- Check closing tags
- Check spelling
- Refresh browser
🚀 What’s Next?
Next lesson:
👉 HTML Elements
You will learn:
- What is an element
- Opening & closing tags
- Nested elements
Master the basics. Everything in web development starts here.
Tags
HTML Tutorial