Document Structure
Learn the foundation of every webpage. Understand DOCTYPE, html, head, and body tags.
Learning Goals
The Core Concept
Every webpage starts with a few standard tags. These tags tell the browser how to read the file. The `<!DOCTYPE html>` tag on the very first line tells the browser that this is a modern HTML5 document. The `<html>` tag wraps all your content. Inside, `<head>` holds hidden details like the page title and search keywords, and `<body>` holds the actual visible text and images that users see.
Visual guide
Html concept flow
A simple original diagram to connect the lesson idea with real project flow.
Code & Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first structured HTML page!</p>
</body>
</html>Expected Output
Title: My First Webpage Heading: Hello World Paragraph: This is my first structured HTML page!
The Minimal HTML Skeleton
Hands-on practice task
The Challenge
Create the absolute minimum HTML structure with a document type declaration, language set to English, a page title 'My Practice Site', and a single paragraph in the body saying 'Ready to build.'
Helpful Hints
- •Use <html lang="en">.
- •Place the <title> inside the <head>.
- •Put the <p> inside the <body>.
Quick Knowledge Check
What happens if I forget the <!DOCTYPE html> tag?
Is HTML case-sensitive?
Continue Learning
Next steps after this lesson
Create the absolute minimum HTML structure with a document type declaration, language set to English, a page title 'My Practice Site', and a single paragraph in the body saying 'Ready to build.'
Ready to put your coding skills to the test?
Don't just read—write code! Use our free Try-Code Playground to experiment with real-time preview, or search utilities on our Developer Tools List.