Learn how to create a properly structured HTML document with DOCTYPE, html, head, and body elements.
In the previous lesson you learned how to write individual HTML elements. But a real web page needs a specific structure so that browsers can interpret it correctly.
Every valid HTML document follows the same blueprint. Think of it like building a house: before you add furniture (your content), you need a foundation, walls, and a roof (the document structure).
The key structural elements are:
<!DOCTYPE html> — Tells the browser this is an HTML5 document.<html> — The root element that wraps everything.<head> — Contains metadata (information about the page, not visible content).<body> — Contains all the visible content of the page.The very first line of any HTML document should be the DOCTYPE declaration:
<!DOCTYPE html>
This is not an HTML tag — it is an instruction to the browser. It tells the browser to render the page using modern HTML5 standards. Without it, browsers may fall into "quirks mode" and render your page inconsistently.
The DOCTYPE declaration is case-insensitive, but by convention it is written in uppercase.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a properly structured HTML document.</p>
</body>
</html>The <head> element is the place for metadata — data about your document that does not appear on the page itself. Common elements inside <head> include:
<title> — Sets the text shown in the browser tab and used by search engines.<meta charset="UTF-8"> — Declares the character encoding so the browser can display text correctly (including accented characters, emojis, and symbols).<meta name="viewport" ...> — Controls how the page scales on mobile devices.<link> and <style> — For connecting CSS stylesheets (you will learn about these later).The <body> element, in contrast, holds everything the user actually sees: headings, paragraphs, images, links, and more.
Which element contains metadata about the page that is not visible to the user?