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

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.

The HTML guide introduces the language. Here, the focus is on the outer document elements that hold every page.

Syntax

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

Why Does HTML Need a 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.

What Do html, head, and body Do?

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.

Why Add 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.

A server can declare the encoding in an HTTP header. Without a reliable encoding declaration, the browser may guess and display garbled characters. Save the file as UTF-8 and declare that encoding consistently.

<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.

How Do HTML Titles and Meta Descriptions Differ?

The HTML title names the page in its browser tab, while a meta description summarizes the page for search engines. Put both in head. Search engines can use them in results or choose alternative text.

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 a 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 an HTML page have more than one head or body?

An HTML document has one head and one body inside its html element, in that order. Browsers may repair extra tags, but the resulting document can differ from the source you wrote.

How do an HTML title and meta description differ?

The HTML title names the page in the browser tab. A meta description summarizes the page for search engines. Search engines may use either in results, but can choose different title or snippet text.

Do HTML meta and link elements need closing tags?

HTML meta and link are void elements and must not have closing tags. A trailing slash on the opening tag is optional in HTML and does not close the element.

Where should an HTML charset declaration go?

An HTML meta charset declaration must fit entirely within the first 1,024 bytes of the document. Put it near the start of head, before the title and other metadata.