Skip to content
Hoover Digital Media Learning Platform

Understanding the <head> Element — charset, viewport, lang, and title

Every HTML document has two major parts: <head> and <body>. The <body> holds the visible content of the page. The <head> holds metadata — information about the document that the browser and search engines use, but that is not displayed on the page itself.

You have been writing <meta charset>, <meta name="viewport">, and lang="en" since Module 01. This lesson explains what each one does and why leaving any of them out causes real problems.

What is metadata?

Section titled “What is metadata?”

Metadata is data that describes data. In an HTML document, metadata describes the document itself:

  • What character encoding does it use?
  • How should mobile browsers scale the layout?
  • What language is the content written in?
  • What is the page’s title?

None of this appears in the visible page. The browser reads it and acts on it silently.

<meta charset="UTF-8">

Section titled “<meta charset="UTF-8">”
<meta charset="UTF-8">

This tells the browser how to decode the text in the document. UTF-8 is a character encoding that covers virtually every character in every written language — letters, numbers, punctuation, accented characters, emoji, and symbols from non-Latin scripts.

What goes wrong without it: Without a charset declaration, the browser guesses — and guesses wrong for non-ASCII content. The result is garbled text: é becomes é, — becomes â€". Even if your page only contains plain English, always declare charset.

Placement: <meta charset> should be the first element inside <head>, before <title>. The browser starts parsing character by character — if it encounters special characters before seeing the charset declaration, it may have already made a wrong decoding decision. Placing charset first avoids this entirely.

<head>
  <meta charset="UTF-8">
  <title>...</title>
</head>

<meta name="viewport">

Section titled “<meta name="viewport">”
<meta name="viewport" content="width=device-width, initial-scale=1">

This tells the browser how to scale the page on mobile devices. Without it, mobile browsers render the page at a desktop width (typically 980px) and then zoom out to fit the screen — making text tiny and the layout unusable.

What the values mean:

  • width=device-width — use the device’s actual screen width as the layout width
  • initial-scale=1 — display at 1× zoom (no initial zoom in or out)

These two values together are the standard baseline for responsive web design. CSS media queries in CSS Foundations will build on top of this foundation.

What goes wrong without it: On a phone, the page looks like a shrunken desktop page. Users have to pinch and zoom to read anything. Every professional website includes this meta tag.

The lang attribute on <html>

Section titled “The lang attribute on <html>”
<html lang="en">

The lang attribute tells browsers, search engines, and assistive technologies what language the page content is written in. It does not translate the page — it declares the language so that language-aware tools can work correctly.

Why lang matters for accessibility: Screen readers use lang to select the correct pronunciation engine. Without it, a French-language page may be read aloud with English pronunciation, and text-to-speech software may mispronounce words. Search engines may also classify the page under the wrong language.

Common language codes:

LanguageCode
Englishen
American Englishen-US
British Englishen-GB
Frenchfr
Spanishes
Germande
Japaneseja

For Summit Trail Outfitters, lang="en" is correct.

<title> — the only required <head> element

Section titled “<title> — the only required <head> element”
<title>Summit Trail Outfitters — Guided Hiking Tours</title>

<title> is not optional. It appears in:

  • The browser tab
  • The browser window title bar
  • Search engine result pages (as the clickable link)
  • Bookmarks and history
  • Screen reader announcements when the page loads

A page without a <title> is incomplete. Every page must have one, and each must be unique — “Page” or “Untitled” is not helpful to anyone.

What else belongs inside <head>

Section titled “What else belongs inside <head>”

The <head> element is a container for metadata. Common elements that belong there:

  • <meta charset> — character encoding (first in <head>)
  • <meta name="viewport"> — mobile scaling
  • <title> — document title (required)
  • <meta name="description"> — page description for search engines
  • <link rel="stylesheet"> — links to CSS files
  • <link rel="icon"> — favicon
  • <script> — JavaScript (often placed at the end of <body> instead)

Nothing visible goes inside <head>. If you put a <p> or <h1> there, the browser will either ignore it or move it to <body> automatically — and the results are unpredictable.

The complete baseline <head>

Section titled “The complete baseline <head>”

These elements together produce the baseline <head> for every STO page:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title — Summit Trail Outfitters</title>
    <meta name="description" content="Page description here.">
  </head>
  <body>
    ...
  </body>
</html>

This is the template. Every page starts here. The remaining lessons in this module add the rest.

Exercise

Section titled “Exercise”

Below is a poorly structured <head>. Identify every problem, then rewrite it correctly.

<!doctype html>
<html>
  <head>
    <title>Page</title>
    <p>Welcome to my site!</p>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Problems to find:

  1. The <html> element is missing the lang attribute
  2. <meta charset="UTF-8"> is missing
  3. <meta name="viewport"> is missing
  4. The <title> is generic — not descriptive or unique
  5. <p> does not belong inside <head>

Write the corrected version, then open each of your Summit Trail Outfitters HTML files and confirm they all have the three required elements in <head>. If any are missing, add them now.

Recap

Section titled “Recap”
  • <head> holds metadata that browsers and search engines use. It does not contain visible page content.
  • <meta charset="UTF-8"> should be first in <head>. Without it, browsers may display garbled characters.
  • <meta name="viewport" content="width=device-width, initial-scale=1"> enables correct mobile scaling.
  • lang="en" on <html> tells screen readers and search engines what language the page uses.
  • <title> is required, must be unique per page, and appears in the browser tab, search results, and screen reader announcements.

Lesson 02 goes deeper on <title> and <meta name="description"> — the two elements search engines use to understand and rank your pages.