If you’ve already read what HTML is, you caught a glimpse of the basic page skeleton there. Now let’s slow down and really look at it. Here’s the thing: every HTML page on the internet — no matter how big or complicated — is built on the exact same handful of parts. Once that skeleton clicks, you can set up any page with confidence instead of pasting in something you don’t quite follow.
This article walks through that structure line by line. By the end you’ll know not just what to type at the top of an HTML file, but why each piece is there.
The skeleton, all at once
Here’s a complete, minimal HTML document. Nothing fancy — just the bones every page needs:
<!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>
</head>
<body>
<h1>Hello!</h1>
<p>This is the page content.</p>
</body>
</html>That’s it. Five distinct parts do the work here: the doctype, the <html> element, the <head>, the <body>, and the bits of metadata tucked inside the head. Let’s take them one at a time.
The doctype: <!DOCTYPE html>
The very first line of any HTML page is the doctype declaration:
<!DOCTYPE html>Its job is simple: it tells the browser “render this page using modern HTML standards.” It looks short and a little odd, and you might wonder why it matters at all. The reason is historical. Browsers can run in two modes — a modern “standards mode” and an old “quirks mode” that imitates how ancient browsers behaved years ago. The doctype is the switch. With it, you get standards mode; leave it out, and the browser slips into quirks mode, where your layout can break in subtle, maddening ways.
You don’t need to memorize anything beyond this: put <!DOCTYPE html> as the first line of every page, every time. It isn’t really a tag (notice it has no closing version), so think of it as a one-line instruction stamped at the top of the file.
Why is it so short now?
Older versions of HTML had long, ugly doctypes — some were a full line of barely-readable text pointing at a web address. HTML5 simplified it down to just <!DOCTYPE html>. If you ever see a long, scary doctype in old code, that’s why. Today, the short one is all you need.
The root: <html>
After the doctype comes the <html> element, and it wraps everything else on the page:
<html lang="en">
...
</html>This is called the root element because it’s the trunk that everything else branches off from. Every other element on the page lives inside it, and there’s only ever one <html> element per document.
Notice the lang attribute. This tells browsers and search engines what language the page is written in — en for English, id for Indonesian, and so on. It might feel optional, but it matters more than it looks:
- Screen readers use it to pick the right pronunciation. A screen reader set to English will mispronounce Indonesian text if you don’t tell it the language.
- Search engines use it to serve your page to the right audience.
- Browser features like automatic translation rely on it.
So always set lang, and set it to the actual language of the page.
The two halves: <head> and <body>
Inside <html>, the document splits into two parts that never overlap: the <head> and the <body>. Getting the difference between them straight in your head will save you a surprising number of headaches.
<html lang="en">
<head>
<!-- information ABOUT the page -->
</head>
<body>
<!-- the page content people SEE -->
</body>
</html>The simplest way to remember it:
<head>is for information about the page — things the visitor doesn’t read directly. The title, the character encoding, links to stylesheets, metadata for search engines and social media.<body>is for the actual content — everything a visitor sees and interacts with. Headings, paragraphs, images, links, buttons, forms.
Visible content does NOT go in the head
This is one of the most common beginner mix-ups, and it leads to a very confusing bug: you write an <h1> or a <p>, the page loads, and… nothing shows up. Nine times out of ten, it’s because the content accidentally ended up inside <head> instead of <body>. The head is not for visible content — only the body is. If something you wrote isn’t appearing, check which half it’s in first.
What lives in the <head>
The head is small but important. Let’s look at the lines you’ll put there on almost every page.
The character set
<meta charset="UTF-8" />This tells the browser which set of characters the page uses to display text. UTF-8 is the one you want — it covers virtually every letter, accent, symbol, and emoji from every language. Leave it out and you risk text turning into garbled question marks or strange symbols, especially around accented characters. Make it the first thing inside your head, before the title.
The viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0" />This one is all about phones. Without it, mobile browsers assume your page was designed for a desktop screen and shrink the whole thing down so it fits — leaving your visitor pinching and zooming to read anything. This line tells the browser “match the page width to the device’s actual width and don’t zoom out.” On a modern site, this is essential, not optional.
The title
<title>My Page</title>The title pulls double duty. It’s the text shown on the browser tab, and it’s the headline Google displays for your page in search results. It does not appear anywhere in the visible page — it lives in the head. A good title is short, descriptive, and unique to each page. Search engines lean on it heavily, so it’s worth getting right.
A few more things that go in the head
As your pages grow, the head is also where you’ll add: a <meta name="description"> (the summary text search engines show under your title), a <link rel="stylesheet"> to bring in your CSS, a <link rel="icon"> for the little tab icon (the favicon), and social-sharing tags so links to your page look good on social media. You don’t need all of these on day one — just know the head is their home.
What lives in the <body>
The body is where the real content goes — and it’s where you’ll do almost all your work as you learn. Everything a visitor actually sees sits here:
<body>
<h1>Welcome to my site</h1>
<p>This is a paragraph of text that visitors can read.</p>
<img src="photo.jpg" alt="A description of the photo" />
<a href="https://acy-partner.com">A link to somewhere</a>
</body>Headings, paragraphs, images, links, lists, tables, forms, buttons — all of it goes in the body. Whenever you learn a new HTML element, it almost always belongs here. The head is a small, fixed set of behind-the-scenes lines; the body is the open canvas where you actually build the page.
How the parts nest together
It helps to see the structure as a set of boxes inside boxes. The doctype sits alone at the top, and then everything nests neatly:
<!DOCTYPE html>
└── <html>
├── <head>
│ ├── <meta charset>
│ ├── <meta viewport>
│ └── <title>
└── <body>
├── <h1>
└── <p><html> holds <head> and <body>. <head> holds the metadata. <body> holds the visible content. Clean, predictable, and exactly the same on every page you’ll ever build. Keep this little tree in mind and you’ll never be unsure where a new line of HTML should go.
A reusable starting point
Here’s a tip that’ll save you time: instead of typing the skeleton from memory every time, keep a copy of this minimal template and start each new page from it. Fill in the title, drop your content into the body, and you’re off:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page title goes here</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>Most code editors can even generate this for you automatically, but it’s worth typing it out by hand a few times first. That’s how the structure actually settles into your memory.
Wrapping up
Let’s pull it all together:
- Every HTML page starts with
<!DOCTYPE html>— one line that switches the browser into modern standards mode. - The
<html>element is the root that wraps everything, and itslangattribute declares the page’s language. - Inside it sit two non-overlapping halves: the
<head>(information about the page) and the<body>(the content people see). - The head holds the character set (
UTF-8), the viewport line (for mobile), and the title (tab text + search result headline) — plus more metadata as your site grows. - The body holds everything visible: headings, paragraphs, images, links, and the rest.
That skeleton never changes from page to page, so once you’ve got it down, you’ve got it for good. Next up in this section, we’ll start filling that body with real content — beginning with the text elements you’ll reach for most: headings, paragraphs, lists, and the tags that emphasize and structure your writing.
