HTML Document Title | The <title> Element

Understanding the <title> Element

The <title> element defines the title of an HTML document and is placed inside the document's <head> element.

The document title does not normally appear as content within the webpage itself. Instead, browsers commonly display it in the browser tab or window, and the title can also be used for bookmarks, browser history, search results, and other representations of the page.

Title Element Syntax

The title element uses a start tag and an end tag, with the document title written between them.

<title>My Webpage</title>

The text between <title> and </title> becomes the document's title.

The title element contains text rather than other HTML elements:

<title>Beginner HTML Tutorial</title>

Where to Place the Document Title

The title element belongs inside the document's head element.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Webpage</title>
  </head>
  <body>
    <h1>My Webpage</h1>
  </body>
</html>

An HTML document should contain one title element within its head.

The document title is metadata about the page, so it does not belong inside the body.

Document Titles in Web Browsers

Web browsers commonly use the document title to identify an open webpage. In a tabbed browser, the title is typically displayed on the page's browser tab.

<title>HTML Tutorial | Learn HTML Step by Step</title>

The title may also be used when the page appears in browser history, is saved as a bookmark or favorite, or is represented elsewhere in the browser interface.

Because users may have several pages open at the same time, a descriptive title makes a webpage easier to identify and return to.

Document Title vs Page Heading

The document title and the page's main heading often describe the same subject, but they are different parts of the HTML document and serve different purposes.

The title belongs in the document head:

<head>
  <title>HTML Document Title | The Title Element</title>
</head>

The main page heading belongs in the document body:

<body>
  <h1>The Document Title</h1>
</body>

The title identifies the document in contexts such as browser tabs and search results, while the h1 heading identifies the main topic to someone reading the webpage.

The two can be similar without needing to contain exactly the same text.

Document Titles & Search Engines

The document title is an important source of information for search engines because it helps describe the subject of a webpage.

Search engines may use the document title when creating the clickable title shown for a page in search results. However, a search engine can choose to display different title text when it determines that another description of the page is more useful for a particular search.

A clear and accurate document title therefore benefits both visitors and search engines, even though the exact title displayed in search results is not controlled entirely by the title element.

Writing Useful Document Titles

A useful document title should identify the page clearly and distinguish it from other pages on the same website.

For example, this title provides very little information:

<title>Home</title>

A more descriptive title provides additional context:

<title>HTML Tutorial | Learn HTML Step by Step</title>

For an individual tutorial page, the title can identify both the specific lesson and its broader subject:

<title>HTML Document Title | The &lt;title&gt; Element</title>

When a website name or brand is included, it is commonly placed consistently before or after the page-specific portion of the title.

There is no single title format that is correct for every website. The important goal is to make each title accurate, descriptive, and useful.

Special Characters in Titles

The contents of the title element are text, and character references can be used when necessary.

For example, because a literal less-than sign can be interpreted as the beginning of markup, the title for a tutorial about the <title> element can use character references:

<title>HTML Document Title | The &lt;title&gt; Element</title>

The browser interprets the character references and represents the title as:

HTML Document Title | The <title> Element

UTF-8 also allows a very large range of Unicode characters to be used directly when they are appropriate for the title.

Common Document Title Mistakes

Document titles are easy to create, but poorly written or incorrectly placed titles can make webpages harder for visitors and other software to identify.

Leaving the document without a title element.
Placing the title element inside the body.
Using more than one title element in the document head.
Using vague titles such as Page, Home, or Untitled Document.
Giving many pages on a website the same document title.
Confusing the document title with the visible h1 heading.
Filling a title with repeated keywords instead of writing a useful description of the page.

Each page should have a title that accurately identifies its content and helps distinguish it from the other pages on the website.

Document Title Best Practices

A well-written document title helps users identify a page in browsers and other contexts while also providing search engines with useful information about the page.

Include one title element in the document's head.
Give every important page a unique and descriptive title.
Describe the actual subject or purpose of the page.
Put the most useful page-specific information where it can be identified easily.
Keep website or brand naming consistent when it is included.
Avoid unnecessary repetition and keyword stuffing.
Do not use the title element as a replacement for a visible page heading.

Think of the document title as a concise label for the webpage that should still make sense when the page is viewed outside the context of the website's navigation.

Summary

The title element defines the title of an HTML document and belongs inside the document's head. Browsers commonly use the title for tabs, bookmarks, and history, while search engines can use it as an important source of information about the page.

The document title is different from a visible heading such as h1. Each page should have a useful, descriptive, and preferably unique title that accurately identifies its content.