How do I write a useful page title in the HTML document head?

You are writing the document title: the text inside a <title> element in the page’s <head>. It provides the document’s title for contexts such as a browser tab. [S1]

That is different from the visible content heading, commonly marked up as an <h1> in the page body. The two elements serve different contexts: the title identifies the overall document, while the heading titles the content readers see on the page. [S2]

For example, a page could have the document title Returns | Northside Books and a visible heading How to return an order. The wording can be related, but do not assume that the head title is simply the on-page heading copied into another location.

Name the page’s particular subject or purpose first, then add a short site or section name if it helps identify where the page belongs. Keep the wording concise, make titles distinct from one another, and put the important identifying information early. These are practical applications of MDN’s guidance to use a descriptive, concise title that identifies the page and differs from other site titles. [S1]

Try this drafting pattern—not a mandatory HTML rule:

[Page-specific subject or task] | [Site or section]

For a small group of related pages, assuming a site called Northside Books and an order-help section, a draft set might be:

• Track an Order | Northside Books
• Change a Delivery Address | Northside Books
• Return an Order | Northside Books

The shared ending signals that the pages belong together; the opening phrases distinguish their purposes. If the site name adds clutter or pushes the identifying words back, shorten the ending or leave it out. There is no single title pattern that fits every website. [S2]

Place the element inside the document head, not among the visible page content. For example, if the visible heading is Return an Order, you could use a more identifying document title while keeping the page heading natural:

<head>
  <title>Return an Order | Northside Books</title>
</head>
<body>
  <h1>Return an Order</h1>
</body>

Here, Northside Books is an illustrative placeholder site name, not a required title component. It is reasonable for the two texts to share the page’s main wording, but the document title can add context that helps identify the page in a browser tab. The heading remains the body’s content title; neither element should be mistaken for the other. [S1] [S2]

Draft the titles as a set, not one at a time. Compare them side by side: each should identify its own page, and a reader scanning the titles should be able to tell the pages apart. Then check each title in the HTML head and compare it with the visible heading to ensure each serves its intended context. [S1] [S2]

The guidance here does not establish a fixed character limit, guarantee how every browser or other service will display a title, or prescribe one required pattern for all sites. Treat the examples as an editing method, then adjust the wording to suit your pages.