Free Preview
HTML5 Fundamentals
HTML Document Structure
HTML Document Structure
By the end of this lesson you will write a complete, correctly structured HTML5 document with the standard skeleton every real page uses.
The HTML5 skeleton
A proper page is wrapped in a standard structure. Learn this by heart:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalomo Hardware</title>
</head>
<body>
<h1>Welcome</h1>
<p>Your trusted hardware shop.</p>
</body>
</html>What each part does
<!DOCTYPE html>- tells the browser this is modern HTML5.<html lang="en">- the whole document;langstates the language.<head>- information about the page, not shown in the body: the title, character set, and the viewport setting that makes pages work on phones.<title>- the text shown on the browser tab.<body>- everything the visitor actually sees.
Why the viewport line matters
Most Zambians browse on phones. The viewport meta tag tells mobile browsers to fit the page to the screen width. Leave it out and your site looks tiny and zoomed-out on a phone. Always include it.
Try It Yourself
- Type the full skeleton above into a new
index.html. - Change the title to your own name and check the browser tab.
- Add two paragraphs inside the body and view the result.
Key Terms
- DOCTYPE - declares the HTML version.
- head - holds page information, not visible content.
- body - holds the visible content.
- meta viewport - makes the page fit mobile screens.
Summary
Every real page uses the DOCTYPE, html, head and body skeleton. The head carries the title and the all-important viewport tag; the body carries what people see.