Every HTML page is built on the same basic frame, much like a house has a frame before the walls go up. The frame has two main parts: the head, which holds information about the page, and the body, which holds everything you see.
Browsers are forgiving and will often display a page that skips parts of this frame. Search engines, screen readers and phones are less forgiving. A page without a character set can show garbled symbols, and a page without a viewport tag looks tiny on a mobile screen. Writing the full structure every time avoids those problems.
Learn this frame once and you can start any web page in seconds.
The four building blocks of an HTML page
<!DOCTYPE html>
<html lang="en">
<head> … </head>
<body> … </body>
</html><!DOCTYPE html>is always the very first line. It tells the browser to use modern HTML rules. It isn't a real tag and it has no closing partner.<html>is the root element. Everything else lives inside it. Thelang="en"attribute tells browsers and screen readers that the page is in English.<head>contains invisible settings: the tab title, the character set, links to CSS files and the description shown by search engines.<body>contains the visible page: text, images, links and buttons.
What goes inside the head
At a minimum, every page should have these three things in its head:
<meta charset="UTF-8">lets the page display any character, including é, ñ, 中文 and emoji 🎉.<meta name="viewport" content="width=device-width, initial-scale=1.0">makes the page fit phone screens instead of looking zoomed out.<title>sets the name in the browser tab, in bookmarks and in the clickable headline of search results.
You'll learn more head tags in HTML Head & Meta Tags.
What goes inside the body
Everything a visitor can see or interact with belongs in the body: headings, paragraphs, images, links, lists, tables, forms and buttons. Most of the HTML you write in this course goes here.
On a real website the body is usually divided into larger regions such as a header, a main content area and a footer. You'll meet the elements for those regions in HTML Semantic Elements.
Indentation shows the family tree
An element placed inside another element is called its child, and the outer element is its parent. We indent children by two spaces so you can see the structure at a glance:
<body>
<h1>My Blog</h1>
<p>Welcome to my first post.</p>
</body>The browser ignores the extra spaces. They are there for people reading the code, including you a week from now. Consistent indentation also makes it much easier to spot a missing closing tag.
HTML Page Structure Syntax
The HTML5 boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page title</title>
</head>
<body>
<!-- visible content goes here -->
</body>
</html>Copy this into every new file. In VS Code, type ! then Tab to get it automatically.
HTML Page Structure Summary
- Every page starts with
<!DOCTYPE html>, followed by the<html>root element. - The
<head>holds information about the page and is not displayed. - The
<body>holds all visible content. - Always include
charset,viewportand<title>in the head. - Indent child elements so the structure of the page is easy to read.
HTML Page Structure Examples
Each example runs in the page. Edit the code and press Run to see what changes.
A complete page for a café
Change the title and some text, then run it. Notice the title isn't shown in the result, because it belongs in the browser tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bean There Café | Fresh Coffee in Leeds</title>
</head>
<body>
<h1>Bean There Café</h1>
<p>Open every day from 7am. Try our cinnamon latte ☕</p>
</body>
</html>Line-by-line explanation
- Line 1Modern HTML mode on.
- Line 2Root element; the page language is English.
- Line 4UTF-8 is what lets the ☕ emoji appear correctly.
- Line 5Makes the page behave properly on phones.
- Line 6The tab title. Good titles describe the page and include useful keywords.
- Lines 8 to 11The body, which is the only part that appears in the result.
Head versus body
Anything you put in the head is not displayed. Try moving the paragraph into the head and run it. The browser pushes it into the body, because text can't live in the head.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Head vs Body</title>
</head>
<body>
<p>I am in the body, so you can see me.</p>
</body>
</html>Line-by-line explanation
- Lines 3 to 6The head: settings only.
- Lines 7 to 9The body: visible content.
Common HTML Page Structure Mistakes
Putting visible content in the head
<head>
<title>Shop</title>
<h1>Welcome to the shop</h1>
</head><head>
<title>Shop</title>
</head>
<body>
<h1>Welcome to the shop</h1>
</body>Headings, paragraphs and images belong in the body. Browsers try to fix this for you, but the result is unpredictable.
Forgetting the viewport meta tag
<head>
<meta charset="UTF-8">
<title>My site</title>
</head><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My site</title>
</head>Without the viewport tag, phones pretend to be a 980px-wide desktop and shrink your page until it's unreadable.
HTML Page Structure in Real Projects
Search engines read your head
When you search on Google, the blue clickable title usually comes from the page's <title>, and the grey text underneath often comes from the meta description. A clear head helps people find and choose your page.
HTML Page Structure Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Fill in the two missing element names.
<!DOCTYPE html>
<html lang="en">
<>
<title>Space Blog</title>
</head>
<>
<h1>Space Blog</h1>
</body>
</html><head> holds the title; <body> holds the visible heading.Where does the text inside <title> appear?
This page shows strange characters instead of "Café" on some computers, and it has no tab title. Fix both problems.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Café Menu</h1>
</body>
</html>- The page has a
<title>that isn't empty - A
<meta charset>tag is present
<meta charset="UTF-8"> lets special characters display correctly, and <title> names the tab.HTML Page Structure Quiz
4 questions to check what you learned.
What must be the very first line of an HTML page?
<!DOCTYPE html><html><head><body>
Which part of the page contains the visible content?
- head
- title
- body
- meta
What does
<meta charset="UTF-8">do?- Allows the page to display characters from any language, including emoji
- Makes the page load faster
- Sets the page font
- Makes the page work on phones
The
langattribute in<html lang="en">helps…- the page load in English-speaking countries only
- screen readers pronounce words correctly and search engines know the language
- translate the page automatically
- Nothing, because it's optional decoration
HTML Page Structure Challenge
Build a page from nothing
Write a complete page for a made-up band from scratch. It needs:
- A DOCTYPE,
html,headandbody - A charset meta tag and a
<title>containing the band name - An
<h1>with the band name and one paragraph about them
- There is a non-empty
<title> - A
<meta charset>tag is present - The body has an
<h1> - The body has a paragraph
- The
<h1>text appears in the title