Chapter 2 of 10
Every HTML page follows the same fundamental structure. Understanding this structure means you'll never be lost when looking at any web page on the internet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Title — shown in the browser tab</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Everything users see goes here -->
<h1>Page Heading</h1>
<p>Content goes here.</p>
</body>
</html><!DOCTYPE html> — tells the browser this is a modern HTML5 document. Always put this first.<html lang="en"> — the root element that wraps everything. The lang attribute helps screen readers and search engines.<head> — metadata and settings. Users don't see this directly, but it controls the page title, character encoding, linked CSS, and more.<body> — everything visible to users: text, images, buttons, forms.ANALOGY
Head vs Body. The <head> is like the instruction manual for the page — it tells the browser how to set things up. The <body> is the actual content that gets displayed. Users see the body, not the head.
<meta charset="UTF-8"> ensures your page can display any character from any language — including emojis. Without it, special characters may break.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> makes your page look correct on mobile devices. Without it, phones will zoom out and your site will look tiny.
TIP
Always include both. These two meta tags should be in every HTML page you ever create. They prevent two of the most common beginner mistakes: broken characters and broken mobile layouts.