HTML Document Structure
Understand the head, body, and overall layout of every HTML page
Overview
What is HTML Document Structure?
The HTML document structure is the standard layout that every HTML page follows. It tells the browser where the metadata lives, where the visible content starts, and how the document should be parsed.
Every valid HTML5 page starts with a doctype declaration, has a single <html> root element, a <head> section for metadata, and a <body> section for visible content.
Basic HTML Document Skeleton
Basic HTML Document Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Key Parts:
- <!DOCTYPE html> – tells the browser to use HTML5 mode
- <html> – root element wrapping the entire page
- <head> – metadata, title, links, scripts
- <body> – all visible content (text, images, forms, etc.)
Document Flow:
- Browser reads the doctype
- Parses the
<html>tag and attributes (likelang) - Processes
<head>(metadata, CSS, scripts) - Renders
<body>content in order - Applies CSS and runs JavaScript
Best Practices
- Always include the HTML5 doctype:
<!DOCTYPE html> - Set the
langattribute on the<html>element (for accessibility and SEO) - Add a
<meta charset="UTF-8">tag to support all common characters - Use a clear, descriptive
<title>for each page - Keep metadata and links to CSS/JS inside
<head>, and visible content in<body>