HTML Document Structure
Introduction
Every HTML page has a predictable structure: a doctype, an <html> root, a <head> for metadata, and a <body> for visible content. This chapter expands the skeleton from your first page and explains the head tags you will reuse in almost every project.
Prerequisites
- HTML syntax basics
- A working editor and browser
- A local
index.htmlfile you can edit
The Standard HTML Skeleton
Use this as your default starting point:
This structure is small enough to memorize and strong enough for real projects.
<!doctype html>
The doctype tells the browser to use modern standards mode:
<!doctype html>Place it at the very top of the file, before <html>.
Without a doctype, browsers may use quirks mode, which imitates old browser behavior and can make layout bugs harder to understand.
The <html> Element
<html> is the root element of the document:
<html lang="en">The lang attribute declares the natural language of the page. It helps:
- screen readers pronounce content correctly
- browsers offer translation
- search engines classify content
Examples:
<html lang="en">
<html lang="zh-CN">
<html lang="ja">If a page mixes languages, set the main language on <html> and use lang on smaller sections when needed:
<p>This phrase is in Chinese: <span lang="zh-CN">你好</span>.</p>The <head> Element
<head> contains metadata and resource links. Its content usually does not appear directly on the page.
Common head children:
| Element | Purpose |
|---|---|
<meta charset="UTF-8"> | Character encoding |
<meta name="viewport" ...> | Mobile viewport behavior |
<meta name="description" ...> | SEO/search snippet |
<title> | Browser tab title |
<link rel="icon" ...> | Favicon |
<link rel="stylesheet" ...> | CSS file |
<script ...> | JavaScript file |
Visible content such as headings, paragraphs, images, and forms belongs in <body>, not <head>.
Character Encoding
Use UTF-8:
<meta charset="UTF-8">UTF-8 supports English, Chinese, accents, emoji, and most modern writing systems. Put it early in <head> so the browser knows how to decode the rest of the file.
If encoding is wrong, you may see garbled text:
ä½ å¥½instead of:
你好Viewport Meta Tag
The viewport tag makes responsive pages behave correctly on mobile:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Meaning:
| Part | Meaning |
|---|---|
width=device-width | Match layout width to device width |
initial-scale=1.0 | Start at 100% zoom |
Without this tag, mobile browsers may pretend the page is a wide desktop page and shrink it down.
Tip
Add It by Default
Even before learning CSS, include the viewport tag. It prevents a common mobile rendering problem.
Page Title
The <title> element appears in:
- browser tabs
- bookmarks
- search engine results
- shared link previews in some tools
<title>HTML Document Structure - hello_code</title>Good titles are short and specific:
<title>Contact Us - Acme Tools</title>Weak title:
<title>Home</title>The visible page heading should be an <h1> in the body:
<h1>Contact Us</h1><title> and <h1> are related, but they are not the same element.
Meta Description
Search engines may use the description as a snippet:
<meta
name="description"
content="Learn the standard HTML document structure: doctype, head, body, charset, viewport, title, and metadata."
>Keep it:
- specific
- human-readable
- roughly one or two short sentences
The meta description does not appear as visible page content unless a tool displays it.
Favicon
A favicon is the small icon shown in browser tabs:
<link rel="icon" href="/favicon.ico">You may also see PNG icons:
<link rel="icon" href="/icon.png" type="image/png">Static sites often place icons at the root of the public folder. The exact path depends on your project.
Linking CSS
External CSS is linked from the head:
<link rel="stylesheet" href="styles.css">This tells the browser to download styles.css and apply it to the document.
The HTML should still be meaningful without CSS. CSS improves presentation; HTML carries structure.
Loading JavaScript
JavaScript can be loaded with <script>:
<script src="app.js" defer></script>defer tells the browser:
- download the script while parsing HTML
- run it after the document is parsed
- preserve script order
For most beginner pages, prefer:
<script src="app.js" defer></script>over placing scripts that block the page early in <head>.
The <body> Element
<body> contains the visible and interactive page content:
Common body content:
- headings and paragraphs
- links and navigation
- images and video
- lists and tables
- forms and buttons
- semantic layout regions
A Better Starter Template
Use this template for the next few chapters:
It introduces header, main, and section, but you will study semantic layout more deeply later.
Common Structure Mistakes
Multiple <head> or <body> elements
Do not write:
<head>...</head>
<body>...</body>
<body>More content</body>Use one <head> and one <body>.
Missing lang
This works visually:
<html>But this is better:
<html lang="en">Visible content in <head>
Do not place headings or paragraphs in <head>.
<!-- Incorrect -->
<head>
<h1>Welcome</h1>
</head>Place visible content inside <body>.
FAQ
Is <head> the same as a page header?
No. <head> contains metadata and resource links. A visible page header belongs in <header> inside <body>.
Can I omit <html>, <head>, and <body>?
Browsers may infer them, but you should write them explicitly. Clear structure is easier to debug and teach.
Does every page need a meta description?
Important public pages should have one. Tiny test pages do not strictly need it, but adding it is a good habit.
Should scripts go in <head> or before </body>?
Both can work. A modern beginner-friendly default is <script src="app.js" defer></script> in <head>.
What comes next?
Block, inline, and semantic flow — how elements naturally flow on a page and why semantic meaning matters more than memorizing display behavior.