Lesson 23 of 55 · HTML
Basic Document Structure
Duration: 6 min
Basic Document Structure
Every HTML document follows the same hierarchy:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>Page Title</title>
<!-- CSS, favicons, meta tags go here -->
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>
Key sections
<!DOCTYPE html>– Triggers standards‑mode rendering across browsers.<html>– Root element; thelangattribute declares the page language for assistive technologies and SEO.<head>– Holds metadata, external resources, and the title.<meta charset='UTF-8'>– Must be the first meta tag; it sets the character encoding to UTF‑8.<meta name='viewport'>– Essential for responsive design on mobile devices; defines the logical viewport width.<title>– Shows up in the browser tab, bookmark bar, and search‑engine results.<body>– Contains everything displayed to the user.
Best practices
- Keep
<head>lightweight. Load critical CSS early, defer non‑essential scripts. - Prefer semantic landmarks (
<header>,<main>,<footer>) over generic<div>containers. - Declare the document language (
lang) as early as possible for SEO and screen readers. - Place the charset meta tag first to avoid rendering glitches.
Tip: The
<title>should be under 60 characters to prevent truncation in search results.
Quick checklist for document structure
- Doctype present? ✅
<html lang='…'>defined? ✅<meta charset='UTF-8'>first in<head>? ✅<meta name='viewport'>included? ✅- Semantic sections (
<header>,<main>,<footer>) used? ✅
If any of the above are missing, add them now before moving on.