Basic HTML Structure: DOCTYPE, html, head, and body Explained
Every HTML page, no matter how big the site is, starts with the same four pieces in the same order: a DOCTYPE, an <html> tag, a <head>, and a <body>. Get that skeleton right once and you'll reuse it on every page you ever build.
This is the written version of my HTML structure video, the second lesson in my HTML beginners course. If you haven't set up a code editor yet, Before We Begin covers that first.
Key Takeaways
<!DOCTYPE html>goes first, on its own, with no closing tag. It tells the browser to parse the page as modern HTML5.<html>wraps the whole document. Everything else nests inside it.<head>holds information about the page: the title, character encoding, viewport settings. Visitors don't see any of it directly.<body>holds everything a visitor actually sees.- Most tags come in an opening/closing pair. A few, like
<meta>, are self-closing.
Start with a new file
Make a new folder and create a file inside it called structure.html. The extension matters: name it structure.txt and the browser shows you raw text instead of rendering a page.
If you're using VS Code, there's a shortcut worth knowing before you type any of this by hand. In a brand-new .html file, type ! and press Tab. VS Code's autocomplete engine, called Emmet, expands that single character into the entire boilerplate below. It's a small thing, but it saves you from re-typing the same nine lines on every new page for the rest of your career.
The DOCTYPE
The very first line of every HTML file is the DOCTYPE:
<!DOCTYPE html>It's an instruction to the browser: which version of HTML to expect, so the page gets parsed the same way every time. Older doctypes exist (HTML 4.01 and XHTML both had their own, much longer versions), but <!DOCTYPE html> is the modern HTML5 declaration, and it's the only one you need. Leave it off and browsers fall back to "quirks mode," which changes how they calculate sizing and spacing in small, inconsistent ways you don't want to debug.
The html tag
Right after the DOCTYPE comes the <html> tag, and everything else in your document nests inside it:
<!DOCTYPE html>
<html lang="en">
</html><html> is a pair, an opening tag and a closing tag, with your entire page in between. Most HTML tags work this way. There are exceptions, like <meta>, <img>, and <br>, which are self-closing and never get a matching end tag, but the open/content/close pattern covers the majority of what you'll write.
The lang="en" attribute tells screen readers and browsers what language the page is written in, so they can pick the right pronunciation and translation defaults. It's easy to leave off and easy to add, so get in the habit of including it now.
The head: what visitors don't see
The <head> goes first inside <html>. Nothing in it renders on the page. It's metadata: information about the page, for the browser and for search engines, not for the person reading it.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head><meta charset="UTF-8">tells the browser which character set to use so accented letters, emoji, and symbols display correctly instead of turning into garbled boxes.<meta name="viewport" ...>tells mobile browsers to render the page at the device's actual width instead of shrinking a desktop layout down to fit. Skip this line and your page looks zoomed-out and tiny on a phone.<title>is what shows up in the browser tab and in search results. It's the one thing in<head>a visitor sees indirectly.
The next lesson in this course, on <head> tags, goes deeper on this element. There's more that can live in there: stylesheet links, favicons, social preview tags. This is the minimum every page needs.
The body: what visitors do see
<body> comes right after <head>, still nested inside <html>, and it holds everything a visitor actually sees: headings, paragraphs, images, links, forms, all of it.
<body>
</body>It starts empty here on purpose. Once you add a heading or a paragraph inside those tags, it appears on the page. Everything else in this course, headings, lists, tables, forms, is content that goes inside <body>.
Put together
Here's the full skeleton, all four pieces in order:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>You can copy this directly, or grab it as a gist. Save it, open it in a browser, and you'll see a blank white page with "Document" in the tab. That's correct. Nothing renders yet because <body> is empty, but the skeleton is in place, and everything you build from here just fills it in.
Where to go next
If you haven't already, start with Basic HTML Tutorial: Build Your First Web Page in 10 Minutes, which walks through this same skeleton plus your first paragraph, heading, and image. From here, the next lesson covers HTML head tags in more depth, then headings, lists, and tables. Work through them in order.
FAQ
What are the four main parts of an HTML page?
The DOCTYPE declaration, the <html> tag, the <head>, and the <body>. DOCTYPE comes first and stands alone. <html> wraps everything else. <head> holds page metadata. <body> holds the visible content.
Do I need the DOCTYPE?
Yes. Without it, browsers render your page in "quirks mode," an older compatibility mode with inconsistent sizing and spacing rules. <!DOCTYPE html> on its own, no closing tag, tells every browser to use the standard modern rendering rules.
What's the difference between head and body?
<head> holds information about the page that a visitor doesn't see directly: the title, character encoding, viewport settings. <body> holds everything the visitor actually sees on screen.
Why does my page look tiny on my phone?
You're probably missing the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> inside <head>. Without it, mobile browsers render the page at desktop width and shrink it to fit, which makes everything look small until you pinch to zoom.
Are all HTML tags opening-and-closing pairs?
Most are, like <html>, <head>, and <body> in this lesson. A handful are self-closing, meaning they never get a separate end tag: <meta>, <img>, and <br> are the ones you'll run into first.
