HTML Title Element

The <title> element sets the name of an HTML document. It’s the text that shows up in a browser tab, in bookmark lists, and as the clickable blue headline in search engine results. Every HTML page should have exactly one, and it lives inside the <head> section rather than the visible page body.

Overview / How it works

The <title> element is a required metadata element that belongs inside <head>. Unlike most elements you’ve learned so far, it is never rendered inside the page’s visible content area (the viewport where the <body> is drawn). Instead, browsers pull its text content out and display it in their own chrome — the tab label, the window title bar, the “Add Bookmark” dialog’s default name field, and the history list.

Because <title> is metadata about the document rather than part of the document’s visible content, it only ever contains plain text. It cannot contain other HTML elements like <strong> or <a> — if you put markup inside it, the browser will not render that markup; it will either strip the tags or display the literal angle-bracket text, depending on the browser, which is why doing so is considered invalid usage.

The title also plays a role beyond the browser chrome. Search engines like Google and Bing usually use the contents of <title> as the clickable headline of a search result. Social sharing tools, RSS readers, and password managers frequently use it too, as a fallback label for the page when nothing more specific (like an Open Graph title) is provided. In short: even though it never appears “in” the page, it is one of the highest-value pieces of text on the entire document.

Semantics vs. presentation

The <title> element is purely semantic metadata — it describes what the document *is*, not how it should look. You cannot and should not try to style it with CSS; browsers do not render it as part of the document’s box model at all, so CSS rules targeting it have no visible effect in the page itself.

Syntax

<head>
  <title>Page name goes here</title>
</head>
Part Description
<title> Opening tag. Must appear inside <head>, and a document should contain exactly one.
Text content Plain text only — no nested HTML elements, no line breaks that matter (whitespace collapses), typically 50–60 characters for good display in search results and tabs.
</title> Closing tag. Required — <title> is not a void element, so it must always be explicitly closed.

The element takes no meaningful HTML attributes of its own (it accepts only the small set of global attributes like lang or dir, which are rarely used on <title> in practice).

Examples

Example 1: A basic page title

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Us</title>
</head>
<body>
  <h1>About Our Company</h1>
  <p>We build tools for independent bakers.</p>
</body>
</html>

Result: The browser tab and window title show the text “About Us”. Nothing from the <title> element appears in the visible page — the body still only shows the heading “About Our Company” and the paragraph beneath it.

This is the minimum you need: a <head> containing one <title>, with the visible content living separately in <body>.

Example 2: A descriptive, SEO-friendly title

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sourdough Starter Guide for Beginners | The Home Bakery</title>
</head>
<body>
  <h1>How to Start a Sourdough Starter</h1>
  <p>Follow these steps to grow your first starter from flour and water.</p>
</body>
</html>

Result: The tab displays “Sourdough Starter Guide for Beginners | The Home…” (browsers truncate long tab text with an ellipsis when the tab is narrow). If this page were indexed by a search engine, the full title text would typically appear as the clickable blue link text in the results list.

Notice the pattern: a specific, descriptive phrase, then a separator (|), then the site or brand name. This is a common real-world convention because it helps both users scanning open tabs and search engines understand both the page topic and the site it belongs to.

Example 3: Title with special characters via character references

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Terms &amp; Conditions</title>
</head>
<body>
  <h1>Terms &amp; Conditions</h1>
  <p>Please read these terms carefully.</p>
</body>
</html>

Result: The tab shows the text “Terms & Conditions” — the browser decodes the &amp; character reference back into a literal ampersand before displaying it, exactly as it would inside any other text content.

Because <title> only holds text, the same character-reference rules that apply to text anywhere else in HTML apply here: a literal & should be written as &amp;, a literal < as &lt;, and so on, so the parser doesn’t mistake them for the start of markup.

How it works step by step

  • The browser’s HTML parser reads the document top to bottom and builds the DOM tree as it goes.
  • When it encounters <head>, it begins constructing the invisible metadata section of the document.
  • When it reaches <title>, it switches into a special “text-only” parsing mode (technically an RCDATA state) — inside this element, angle brackets are treated as literal text rather than the start of new tags, until the matching </title> is found.
  • The browser takes that text, decodes any character references (like &amp;), collapses extra whitespace, and stores it as the document.title value.
  • The browser chrome (tab bar, window title, bookmark dialog) reads that stored value and displays it — this happens independently of rendering the visible page, which is handled separately once the parser reaches <body>.
  • If a page defines the title again later (for instance dynamically, in a JavaScript-driven app), the tab text updates to match — but that’s a scripting topic outside this HTML lesson.

Common Mistakes

Mistake 1: Omitting the title entirely

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>

This document has no <title> at all. Browsers will typically fall back to showing the file name or URL in the tab, which looks unprofessional and gives search engines nothing meaningful to show as a headline. Fix it by always including one:

<head>
  <meta charset="UTF-8">
  <title>Welcome to My Site</title>
</head>

Mistake 2: Putting markup inside the title

<title><strong>Home</strong> - My Site</title>

Because <title> only ever holds plain text, the <strong> tag is not interpreted as an element — the parser is in text-only mode inside <title>, so this either shows the literal characters <strong> in the tab or is silently ignored, and it is never bold. Use plain text only:

<title>Home - My Site</title>

Best Practices

  • Include exactly one <title> per page, always inside <head>.
  • Make each page’s title unique and descriptive — avoid reusing the same title across every page of a site, since that hurts both usability (indistinguishable tabs) and SEO (duplicate search result headlines).
  • Keep it reasonably short, roughly 50–60 characters, since browsers truncate long tab text and search engines truncate long result headlines.
  • Put the most important, specific words first (the page topic), and the site/brand name last, often separated by a character like | or -.
  • Never use <title> for visible on-page headings — that’s the job of <h1> in the <body>. The two often contain related but not identical text.
  • Don’t stuff it with repeated keywords; write it as a natural, human-readable phrase a person would want to click on in search results.

Practice Exercises

  • Create a minimal HTML document for a personal portfolio homepage with a <title> of “Portfolio – Jane Doe” and a <body> containing an <h1> that reads “Hi, I’m Jane”.
  • Take a document whose <title> currently reads “Home” and rewrite it to be more descriptive and SEO-friendly for a bakery’s homepage, keeping it under 60 characters.
  • Find a bug: a document has two <title> elements inside <head>. Explain, without changing anything else, which one the browser tab is likely to display, and rewrite the <head> to keep only one.

Summary

  • The <title> element defines a document’s name and must live inside <head>.
  • It never appears inside the visible page — instead browsers show it in the tab, window title, bookmarks, and history.
  • Search engines commonly use it as the clickable headline in search results, making it valuable for SEO.
  • It can only contain plain text — no nested HTML elements — and character references like &amp; still work inside it.
  • Every page should have exactly one unique, descriptive, reasonably short <title>.