LearnHTML.net

Explore

LearnHTML.net

Quick find

Search lessons, patterns, and prompts

Open full search
SearchPrompt Builder

Reference · Beginner

The title element

title names the document for browser tabs, bookmarks, search results, and screen reader announcements. Every page needs exactly one.

Published
Last checked

What it is

title gives the document its name. It lives in the head and contains plain text only. An ordinary standalone HTML document must have exactly one:

<head>
  <meta charset="utf-8" />
  <title>Contact — Riverside Plumbing</title>
</head>

HTML allows narrow exceptions when a higher-level protocol supplies the title, such as some embedded or email contexts. A normal web page without one is invalid and becomes much harder to identify in tabs, history, and assistive technology.

Where it appears

The title labels the browser tab, becomes the default bookmark name, appears in browser history, and gives assistive-technology users an orientation cue when a page loads. Search engines also consider it when generating a result's title link, though they may choose another visible heading or other page text.

That range is why a vague title costs more than it looks. "Home" in a list of twenty open tabs identifies nothing.

Writing one that works

Front-load the specific part. Someone scanning tabs or search results sees the first few words, so put the page's distinguishing information first and the site name last: "Contact — Riverside Plumbing" beats "Riverside Plumbing — Contact".

Make every title unique across the site. Duplicate titles often come from a template that forgot to interpolate the page name, and they make search results and history harder to distinguish.

There is no exact character limit for a title element. Search results truncate to fit the available width, and search engines may generate a different title link. Write for the reader, front-load distinguishing words, and do not pad or cut a useful title merely to hit a character target.

Title, h1, and og:title

Three different jobs. title names the document from outside: tabs, results, history. The h1 names the content from inside, once the reader has arrived. og:title is a separate candidate supplied to services that support Open Graph link previews.

They can differ, and often should — a title may carry the site name for context that the h1 does not need — but they should never contradict each other. A page whose tab says one thing and whose heading says another reads as broken.

Accessibility

Screen readers can present the title when a page loads, making it an important orientation signal after navigation. In a multi-page task, distinct titles help someone track where they are. Identical titles across steps remove that signal.

Common failures

  • The template default shipped to production, so every page reads "Home" or the framework's placeholder.
  • Duplicate titles across many pages, usually from a missing interpolation.
  • The site name first, pushing the distinguishing words past the truncation point.
  • Markup inside title, which is not permitted; it holds text only.
  • A title that contradicts the visible h1.

Verify it

Open several pages and read the tabs side by side: each should be distinguishable at a glance. Then fetch the deployed page and read the title the server sends, since templating errors show up in the response rather than in the source you wrote.