HTML Document Structure
Every HTML page has the same skeleton, like every house has a foundation, walls and a roof. Learn it once and you can start any page from memory.
On this page · 5 min · Beginner
On this page
- Learning objectives
- Explanation
- Syntax
- Code example
- Step by step
- Real-world use
- Common mistakes
- Best practices
- Remember this
- Practice exercise
- Mini quiz
- Related topics
- My notes
- Reading time
- 5 min
- Difficulty
- Beginner
- Updated
- Oct 28, 2026
Related tutorials
Learning objectives#
- Write the full HTML skeleton from memory
- Know what belongs in <head> and what belongs in <body>
- Explain why lang, charset and viewport matter
- Understand that HTML forms a tree of nested elements
Explanation#
<!DOCTYPE html> is always the first line. It switches the browser into modern “standards mode”. Without it, browsers use old quirky rules.
<html lang="en"> wraps everything. Inside it there are exactly two children: <head> and <body>.
<head> is the “information about the page” part. Nothing in it is shown on the page itself: the character set, the tab title, links to CSS files and meta tags for search engines.
<body> is the “what you see” part: headings, text, images, links, forms — everything visible.
Elements sit inside other elements, forming a family tree. <html> is the parent of <head> and <body>; <body> is the parent of your headings and paragraphs.
Syntax#
<!DOCTYPE html>
<html lang="en">
<head> … information about the page … </head>
<body> … everything visible … </body>
</html>
Code example: The complete starter template#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Me</title>
</head>
<body>
<h1>Hi, I am Asha</h1>
<p>I am learning web development.</p>
</body>
</html>
A page titled “About Me” in the browser tab, showing a heading and a paragraph.
Step-by-step explanation#
- <!DOCTYPE html> — “this is a modern HTML page”.
- <html lang="en"> — the root; lang tells screen readers which language to pronounce.
- <meta charset="UTF-8"> — lets the page show any character: ₹, é, 你好, emoji.
- <meta name="viewport"> — makes the page fit phone screens instead of showing a zoomed-out desktop page.
- <title> — the text in the browser tab and in Google search results.
- <body> — the heading and paragraph that the visitor actually sees.
Real-world use case#
Every new page you create — a portfolio, a landing page, a blog post template — starts with this exact skeleton. In VS Code, type ! and press Tab to generate it.
Common mistakes#
A <p> or <img> inside <head> is invalid. The browser moves it into <body>, which can break your layout in surprising ways.
Without it, phones render the page at desktop width and shrink it, so text becomes tiny.
Without <meta charset="UTF-8">, characters like ₹ or “smart quotes” can appear as garbage such as ₹.
Best practices#
- Start every page from the same template
- Put <meta charset> as the very first thing in <head>
- Write a unique, descriptive <title> for every page
- Indent child elements by two spaces so the tree is visible
Remember this#
Head = the page’s ID card (invisible info). Body = the page’s face (everything you see).
The magic four in <head>: charset, viewport, title, (then CSS links).
In VS Code: type ! then Tab → instant skeleton.
Practice exercise#
Your task: Write a complete HTML document from memory with the title “My Hobbies”, a heading and a short paragraph about one hobby.
Need a hint?
Show solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Hobbies</title>
</head>
<body>
<h1>My Hobbies</h1>
<p>I love playing cricket every Sunday morning.</p>
</body>
</html>
Mini quiz#
Where does the <title> element go?
Want more? Practise all HTML MCQs · HTML interview questions
My notes#
Saved in this browser.