Every HTML page follows the same basic skeleton. Once you understand this structure, every webpage you ever look at will make sense. Think of it as the blueprint that all webpages share.
Here is the thing — browsers are incredibly forgiving. You can write just <h1>Hello</h1> without any structure and the browser will still display it. But proper structure makes your pages work consistently across all browsers and devices.
The Basic Skeleton
Here is the minimal structure that every HTML page should have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>Breaking It Down
Let me explain each piece so you know what they do:
<!DOCTYPE html>— This tells the browser, "Hey, this is an HTML5 document." It is not a tag, it is a declaration. It goes at the very top, always.<html lang="en">— This is the root element. Everything else lives inside it. Thelang="en"part tells the browser the page is in English.<head>— This is where meta-information goes. Things the browser needs to know but that do not show up on the page itself. The title, character encoding, links to CSS files, and so on.<body>— This is where all the visible content goes. Everything you see on the page lives inside the body.
The Tree Structure
HTML has a natural tree structure. Think of it like a family tree. The <html> element is the parent of <head> and <body>. Those are siblings. Then <h1> and <p> are children of <body>.
This parent-child relationship is called the DOM tree (Document Object Model). Understanding this tree structure becomes very important when you start working with CSS and JavaScript, because you will often target elements based on where they are in the tree.
For now, just remember that HTML is always nested. Tags inside tags inside tags. Keep your indentation clean and you will always be able to see the structure at a glance.