WSS
Web Specification Studio Home
On this page
FoundationsRequiredUpdated

The <title> element

Every HTML document must have exactly one non-empty <title> element inside <head>. It names the page for browsers, search engines, screen readers, social previews, and AI agents. It is not the same thing as the page's <h1>.

What it is

The <title> element is a required child of <head> that names the document. It is the only HTML element with no markup inside it - only text. There must be exactly one per page.

<title>Setting up CSP · Web Specification Studio</title>

The <title> is not the <h1>. Both name the page, but they are read in different places. The <h1> sits at the top of the content, where the reader can already see the logo, the navigation and the URL. It can assume you know where you are. The <title> appears where none of that is present: a browser tab, a bookmark, a list of search results drawn from many different sites, the first thing a screen reader announces on load. It can assume nothing.

That is why “Setting up CSP” is a good <h1> and a poor <title>. As an <h1>, the site name is already on the screen. As a <title> it is not, so the title has to carry it: Setting up CSP · Web Specification Studio.

Why it matters

  • Browsers show the title in the tab, the window, the bookmark, and the history entry.
  • Search engines use it as the default link text in results (Google may rewrite it, but a good <title> is rewritten less).
  • Screen readers announce the title when the page loads, so it is the first thing a non-sighted user hears.
  • Social platforms fall back to it when no <meta property="og:title"> is set.
  • AI agents use it as the canonical short description of the page.

Missing or empty titles are a WCAG 2.4.2 Level A failure - the lowest accessibility bar there is.

How to implement

Because the title runs without context, write it for the page, not for the site:

  • Page-specific first, site name second, separated by a delimiter such as ·, -, or |. The unique part is what a reader scanning tabs or search results needs; put it where truncation cannot hide it.
  • 50–60 characters is a reasonable target. Google typically displays around 600 pixels of width.
  • One per page, unique per page. Two pages with the same title is a quality signal that they are duplicates.
  • No keyword stuffing. Write what the page is about.

The order matters when the tab is narrow:

<!-- Good: unique part first -->
<title>HSTS · Security · Web Specification Studio</title>

<!-- Worse: site name eats the tab -->
<title>Web Specification Studio - Security - HSTS</title>

For the homepage, the site name on its own is fine:

<title>Web Specification Studio</title>

Common mistakes

  • Empty <title></title>. Browsers show the URL; screen readers announce nothing useful.
  • Reusing the homepage title on every inner page.
  • Front-loading the site name so every browser tab looks identical until hovered.
  • Stuffing ten keywords separated by pipes. Search engines rewrite or ignore it.
  • Including HTML tags or entities inside <title> - it accepts plain text only.
  • Placing <title> inside <body> instead of <head>.
  • Updating <h1> in client-side navigation without updating document.title.

WHATWG <title> Specification & WCAG 2.4.2 Page Titled Rules

Structuring unique document title elements across web applications requires adhering to WHATWG and WCAG accessibility standards:

  • WHATWG Document Title Requirement (<title>): Every valid HTML document MUST contain exactly one non-empty <title> element located directly inside <head>. The <title> contains raw text content only; HTML tags and entities inside <title> are parsed as plain literal characters.
  • WCAG 2.4.2 Page Titled (Level A) Compliance: WCAG 2.4.2 requires web pages to have descriptive titles. Screen readers (VoiceOver, NVDA) announce <title> text immediately when a page loads, making it the primary contextual orientation signal for non-sighted users.
  • Front-Loading Unique Topic Titles: Format titles with page-specific topic text first, followed by a brand separator (<title>Page Topic - Brand Name</title>). Front-loading the unique topic prevents truncated browser tabs from displaying identical brand names across multiple open tabs.

Verification

  • View source. Confirm <title> is inside <head> and non-empty.
  • Open ten tabs from your site. Every tab title should be distinct and start with the page-specific topic.
  • Test in a screen reader - the title must be announced on load.
  • Run curl -s https://example.com | grep -i '<title' and confirm it is set without JavaScript.
  • Test with a screen reader (VoiceOver, NVDA). It should announce the title on load.

Related topics

Sources & further reading

Add as a preferred source on Google