Document Head & Meta
Today we look inside the head: the title for the browser tab, charset, viewport, and a meta description for search results.
- 1
What the document head is
Last lesson we named the visible landmarks on the page. Today we open the other room of the document:
<head>. Visitors do not see this area as the page body. The browser and search engines read it first.Inside the head we set the tab
<title>, the character set, how the page scales on phones, and a shortmetadescription. Those four pieces are today’s lesson. - 2
The Invisible Control Room: Guiding Browsers, Crawlers, and Devices
A page needs a name on the browser tab, character encoding so non-English letters display correctly, a viewport scale so phones don't shrink the desktop layout to microscopic size, and a snippet for Google search results.
None of this information belongs inside visible page paragraphs. The
<head>element acts as the backstage control room, packing machine-readable configuration before the page is rendered. - 3
How Browsers and Search Engines Parse Head Metadata Before Painting
The browser evaluates the
<head>before painting pixels on the screen.charset="UTF-8"immediately configures the byte decoder to avoid garbled characters.The
viewporttag informs mobile browsers to set the canvas width directly equal to the device's physical screen width (width=device-width) at 100% scale (initial-scale=1.0). - 4
Hands-On: Setting Up Encoding, Viewport, and Document Title
Read the
<head>block carefully below. Notice that while the head contains essential technical metadata, only the content inside<body>is visibly rendered in the browser preview. - 5
Best Practices: Order of Execution Inside <head>
Put charset near the top of the head. Keep title unique and clear. Write a description that summarises the page in one or two sentences. Leave Open Graph and favicon icons for later if you need them.
Invisible to the user on the canvas. Supplies instructions to the browser tab, mobile rendering engine, and search engine crawlers.
The visible area of the webpage. Everything the visitor sees, clicks, reads, and interacts with must be placed inside the body.
What you'll learn
- 1head holds page metadata
- 2title names the browser tab
- 3charset sets the character encoding
- 4viewport helps phones layout correctly
- 5meta description summarises the page
Line by line
<meta charset="UTF-8">An empty meta tag that sets the character encoding. Put it early in the head so text decodes correctly.
name="viewport" content="width=device-width, initial-scale=1.0"Tells phones to use the device width. Without it, many mobiles show a zoomed-out desktop page.
name="description" content="..."A short summary of the page. Search engines often show this under the result title.
<title>CodeX Cider - HTML</title>The document title. It appears on the browser tab and in bookmarks. It is not the same as an
<h1>in the body.
Try it yourself
Write a <head> with charset, viewport, a description about your favourite food page, and a clear <title>. Keep a tiny <body> with one heading.
Hint: Meta and title live in the head. Visible text lives in the body.
Common mistakes
- 1.Putting
<title>or meta tags in the body. They belong in the head. - 2.Skipping the viewport meta on a site people open on phones. The layout often looks tiny and hard to read.
Interview prep
Q: What is the crucial difference between <title> and <h1>?↓
<title> lives inside <head> and names the document for the browser tab, bookmarks, and search engine results. <h1> lives inside <body> as the primary visible headline on the page canvas.
Q: Why is <meta charset="UTF-8"> mandatory?↓
UTF-8 covers almost all characters and symbols worldwide (emojis, accents, Asian and Indic scripts). Without it, browsers may misinterpret raw bytes into garbled text (mojibake).
Q: What does <meta name="viewport" content="width=device-width, initial-scale=1.0"> do?↓
It instructs mobile browsers to render the website at the screen's physical CSS pixel width with 1:1 initial zoom, preventing mobile viewports from zooming out into an illegible miniature desktop page.