On this page

HTML Document Structure: Doctype, Head, Body, and Viewport

Published February 21, 2026 Updated August 8, 2026

Every HTML page is built on the same skeleton: a document type declaration, an html root, a head for metadata, and a body for visible content.

Syntax

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Page title</title>
  </head>
  <body>
    <!-- visible content goes here -->
  </body>
</html>

The Doctype

The first line of any HTML page is <!DOCTYPE html>, and it tells the browser to render in standards mode. This single line is all modern HTML needs, so you do not have to memorize the long doctype strings from the older HTML 4 days. Leave it out and browsers fall back to a legacy quirks mode that can shift your layout in ways you did not ask for.

Quirks mode changes some sizing calculations you would not expect, most notably around how padding and borders factor into an element's total width. A page can look fine in one browser and shift slightly in another once quirks mode kicks in, because each browser implemented that old legacy behavior a little differently. One line at the top of your file avoids the whole mess.

The `html`, `head`, and `body` Elements

The html element wraps the whole document and carries the lang attribute, which tells assistive technology and search engines what language the page is in. Inside it, the page splits into two parts. The head holds information about the page that readers do not see directly, like the title and links to stylesheets. The body holds everything a person actually looks at, from headings to images.

Get the lang value right, using a real code like en or es, and a screen reader loads pronunciation rules for the correct language instead of reading English words with a guessed accent. Leave it off, and a browser or assistive tool has to guess, which it does inconsistently from one site to the next. It is one attribute, and it is worth setting correctly every single time.

The Charset and Viewport Meta Tags

Two meta tags belong in nearly every head you write. The charset tag sets the character encoding so accented letters and symbols render correctly, and utf-8 is the right choice for almost every page today. The viewport tag tells mobile browsers to match the device width instead of zooming out to show a desktop-sized layout.

Leave the charset tag out and the browser has to guess the encoding by sniffing the raw bytes of the page. Guess wrong, and you get mojibake: garbled runs of stray symbols where an accented letter or a curly quote should be. Declaring utf-8 up front removes the guesswork entirely.

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

A common gotcha here is leaving out the viewport tag, then wondering why your page looks tiny on a phone. Without it, mobile browsers assume a wide desktop canvas and shrink everything to fit. Add the viewport line and your responsive styling starts behaving the way you expect. Test this on an actual phone or a real device simulator rather than just a resized desktop browser window, since a resized window does not reproduce the same default zoom-out behavior a genuine mobile browser applies.

The `title` Element and Meta Description

The title element sits in the head and names the page. Browsers use that text as the tab label and as the default name when someone bookmarks the page, and search engines normally use it as the clickable link text in a result. An ordinary standalone page carries exactly one, and no document carries more than one.

Write a title that still makes sense on its own, away from the page. "Account settings" tells a reader with twenty tabs open what they are looking at, while "Home" or "Untitled" tells them nothing. Long titles are not an error, though a narrow tab may truncate one, and Google may trim or replace it with text from the page.

The description is a separate short summary of the page, written as a meta element whose name is description. Search engines may show it under the result link, and they may also ignore it and write their own summary from the page content. Treat it as a suggestion you are offering rather than text you control.

<title>Account settings</title>
<meta name="description" content="Manage your profile and notification preferences." />

Neither element changes what a visitor sees on the page. Google does not use the meta description as a ranking signal, while title text is read to work out what a page is about, so a clear title can help relevance without guaranteeing a better position. Give every page its own title and description rather than copying one pair site-wide.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Account settings</title>
  </head>
  <body>
    <h1>Account settings</h1>
    <p>Manage your profile and notification preferences.</p>
  </body>
</html>

Open that file in a browser and you get a page titled "Account settings" in the tab, with a heading and a paragraph in the window. It is plain, and it is a correct, complete HTML document you can build on.

Notice that changing the text inside title only changes what shows in the browser tab and in a bookmark, never anything inside the rendered page itself. That split is the clearest proof that head and body serve two completely different audiences. One is metadata meant for the browser and other tools, and the other is content meant for a human reader.

Frequently Asked Questions

Can a page have more than one head or body?

No. The specification allows exactly one of each inside the html element, in that order. Markup that tries otherwise is silently corrected by the browser rather than rendered as written.

What is the difference between the title and a meta description?

The title names the page and appears in the browser tab and as the clickable headline in search results. The meta description is a separate summary that search engines often show beneath it, though they frequently substitute their own text.

Do meta and link elements need closing tags?

No. Both are void elements with no content and no closing tag. The trailing slash some pages write is optional in HTML and is a habit carried over from XHTML rather than a requirement.

Where does the charset declaration have to go?

Entirely within the first 1024 bytes of the document, which in practice means first inside the head, before the title. The browser needs the encoding before it can decode the rest of the page correctly.

HTML Elements and Structure: the full category
Headings and Text: filling the body with content
HTML guide: the complete language overview

Sources

[1]
Doctype
(developer.mozilla.org)
[2]
The lang global attribute
(developer.mozilla.org)
[3]
Understanding Success Criterion 3.1.1: Language of Page
(w3.org)
[4]
The metadata element
(developer.mozilla.org)