The title element is often one of the first elements covered when learning HTML. But because changing a page’s title is trivial, many website creators mistakenly view it as optional or purely decorative, leaving it neglected. But the truth is that the title is a functional element that aids users in a variety of situations.

This is part 1 of an article series on the title element. Here, we’ll look at what this element is and does, and how it affects a user’s experience.

title refresher #

First, let’s review the title element, just in case you’re not familiar with it.

The title lives in the head section of an HTML document alongside other meta data, and contains the name of the page. There's no attributes or properties needed here, simply the opening and closing tags with a value between them.

So the title element of the home page of a website called Darin's Shoe Company would look like this:

markup
<head>
     <title>Darin's Shoe Company</title>
</head>

This tells the browser to use that information in its UI, typically in the application or tab bar, giving users an easy reference to the name of the current page:

Browser interface showing one tab labelled "Darin's Shoe Company"

Accessibility implications #

While many of us are aware of page titles, in most cases we don't pay attention to them unless we need to. Those of us that can see are able to glance and quickly scan a page to understand where we're at and what information it contains. But this isn't the case for everyone.

Those that use accessible technology like screen readers rely on the page title to know where they've navigated to. The title element is the first thing announced by a screen reader when visiting a page, which lets users get their bearings and immediately understand what the content will contain.

For these users, it's an imperative part of using the web. Without it they can experience confusion, wasted time, and even the inability to find what they're looking for.

Functional uses of the title element #

As mentioned, the title element quietly adds a lot of useful functionality to our browsing experience. Let's cover some of the key ways.

General information and navigation #

The most basic and common use of a title is letting users know which page they're on and what information the page contains.

When clicking on a link to a new page, a proper title (along with the page's level-1 heading) informs you that you're at the intended destination. Say we were on the Darin's Shoe Company site and clicked a link for the Products page:

Browser interface showing one tab labelled "Products - Darin's Shoe Company"

A quick glance at the tab bar as the page loads assures me that I've landed in the right spot. Or maybe I've come back to my computer after being away for a time – one look at the page title reminds me which page and site I'm on.

For our screen reader users, if you remember, the title element is the first thing announced when a page is navigated to. So after activating a link to the Products page they'd hear "Products, Darin's Shoe Company". Which is a nice confirmation that they've navigated to the expected place.

Managing browser tabs #

Many of us use the tabs feature in our browser to keep multiple (and in my case, way too many) web pages open at one time that we can easily switch between. We're able to know which web page is open in which tab via their respective title elements, which the browser uses to label each tab.

Take this group of tabs, for example:

Tabbed browser interface display three tabs that are labelled "Best Sellers - Darin's Shoe Company", "New Releases - Darin's Shoe Company", and "Sale Items - Darin's Shoe Company"

We know which page is in which tab based on the page titles. We can easily scan the tab labels and open the one that we want.

For screen reader users, the title is even more important here. When navigating between tabs, they're able to listen to a list of tabs that are currently open. So their ability to find the correct one relies on a proper page title. Without that, they'd have to enter a page and begin reading its content to find out what that tab is, which is an annoying waste of time.

Browsing history #

Our browsing history is much more than just the Back and Forward buttons. Modern browsers give us a variety of ways to view and interact with our larger browsing history.

The title element is used to label pages in browsing history lists, allowing users to identify and find pages they're looking for. Without a useful and unique page title, it would be difficult to find pages we wanted to revisit.

Let's say we were looking at dozens of pairs of shoes earlier and are now trying to find a specific pair that we liked. So we pull up our history page to try and find it:

Browser interface with a history tab open that contains a list of pages with generic titles of "Shoe Page - Darin's Shoe Company"

Because the page titles don't provide the proper information, we can't make sense of any of the product pages that we visited on the Darin's Shoe Company site. We'd have to visit each page one by one or simply start our search over.

But if the site were to use more helpful page titles, finding the page in our browsing history now seems a lot more realistic:

Browser interface with a history tab open containing a list of pages with unique titles like "SuperSole 3 Shoe - Darin's Shoe Company"

If we remember even a part of the shoe's name, seeing that in the page title may jog our memory and allow us to find that product page again without having to go through our history one by one.

Bookmarks #

Instead of relying on their recent browsing history, some users prefer to save web sites and pages as Bookmarks, a list of user-curated shortcut links to visit later. Most browsers allow you to bookmark a page using the "CMD/CTRL + D" shortcut, or by using the "Bookmark this page" option under the Bookmarks section of the application menu.

When a bookmark is created, the browser uses the title element to label it. So if a title isn't reflective of the page content, it won't be a very helpful shortcut. It's worth noting that the user can edit and enter their own bookmark label if they choose. But a proper page title should be perfectly suitable as a bookmark label as well.

Say we're sneakerheads that frequently visit the Darin's Shoe Company website to shop for new shoe models. We might bookmark the New Releases page so that we can pop over there easily to try and snag a new pair when they're released:

Browser interface with a bookmarks toolbar. The toolbar contains four bookmark links. One is titled "New Releases - Darin's Shoe Company"

The page title serves as a fine bookmark here. The browser's bookmark bar truncates the site name, but that's ok. The page name combined with the favicon provide all we need to know about where this bookmark takes us.

And if a screen reader user goes through their bookmarks list, they'll simply hear the clear, descriptive titles.

Some browsers have even begun to introduce bookmark-related features. Safari, for example, has a temporary bookmark feature called Reading List which lets users curate a list of news articles and blog posts for later.

These features rely on the title element to identify them in their respective lists as well, so it's imperative even on article-style pages to use the article or post name as the title instead of simply something like "Article":

Browser interface with a Reading List sidebar which contains titles, previews, and links to three articles.

This way, each article can easily be identified in a user's reading list.

Conclusion #

We've reached the end of the first part of this article series. We covered what the title element is, does, and some of the key functionality that it provides to users' browsing experience.

Please keep an eye out for part 2 of the series, where we'll cover some best practices for creating great and useful page titles. Thanks for reading!