Build a Better Process

HTML title Tag Reference and Examples

This is likely the most important tag, that is, if you want someone to actually read your web page.
  1. About - Understand the purpose of the title tag.
  2. Syntax - Describe how it is used.
  3. Settings - View required and optional attributes plus default behaviors.
  4. Examples - Review common examples.
face pic by Paul Alan Davis, CFA
Updated: February 23, 2021
Face it, only a small percentage of potential readers will be motivated to click, so let's see how we can increase those odds.

Outline Back Tip Next

/ factorpad.com / tech / html5 / reference / html-title-tag.html

An ad-free and cookie-free website.

Understanding the HTML title Tag


The <title> tag is one of several important tags the developer places in every HTML document.

HTML Tags Reference

1. About the title tag

The <title> tag sits inside the <head> element, so it is not visible to the user.

It has three primary purposes. First, to give potential readers an idea of what it is about. What this means is that it has to be accurate, informative and hopefully catchy. This is the primary way the web developer motivates users to click.

Second, the <title> tag is likely the most important tag search engines use to sort and rank web pages, so website SEO experts focus a lot of time and effort on maximizing the web page SEO exposure with this tag.

Third, the <title> element text is displayed in the tab of the user's browser next to the favicon.ico image. It is also what the user sees if they save a bookmark in their browser.

As we will see later, the <title> element does not need to match the <h1> element text the reader typically first sees, however the two are often similar.

2. Syntax for the title tag

The <title> tag for HTML5 is a two-part tag so it must be closed with the </title> tag.

There is only one <title> element and it must sit within the <head>. While technically not required, it is highly advised to use a web page title.

Text within the <title> element should be no longer than 60-70 characters. Everything past some point is truncated by search engines. Anything longer will likely confuse readers as well.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> </head> <body></body> </html>

The example above shows the common and basic placement of a web page title.

3. Settings for the title tag

As with all tags, Global Attributes can always be set, but no other attributes are common or required.

Default behaviors

Each user-agent (browser) has its own stylesheet per se. This dictates how that browser styles each element by default. The Chrome browser styles the <title> element using the following specifications.

title { display: none; }

4. Examples of the title tag

Example 1 - Show the base-case of a title tags

The following code will set up a document with meta settings for the encoding, viewport, page title and description.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <meta name="description" content="Page description"> </head> <body></body> </html>
Example 2 - Show the similarities of title tags and h1 elements

The following code illustrates the point about the similarities between web page titles and headings with a real example from this page.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML title tag - Code a catchy SEO title people click | HTML Tags List | FactorPad</title> </head> <body> <h1>HTML title tag</h1> </body> </html>

Let's walk through a discussion of web page title logic for the page you are currently reading. Keep in mind this a reference page, so it isn't meant to be edgy or newsworthy; instead, it is meant to be technical and informational.

The first part of the page title is what someone might type into a search engine. The middle part helps address a problem the reader wants to solve. The last part gives readers an indication that this is part of an HTML reference and who created it.

Now, once the reader clicks the link from a search engine (presumably) they see the title "HTML title tag" in the <h1> element (as you did above). Here we didn't need to repeat the informational part because the reader is already there (or here :]).

Our goal here wasn't on what motivates people to take action on titles (ie, Journalism), but instead to demonstrate how to code it in HTML after you find a catchy and informative title that accurately reflects page contents.

Related HTML Content

The <title> tag is paired with other essential tags that should be included in every HTML document.

What's Next?

Have you seen our YouTube Channel yet? Subscribe here and see if the videos help you learn faster. Follow @factorpad for updates on new content.

Outline Back Tip Next

/ factorpad.com / tech / html5 / reference / html-title-tag.html

examples of the html title
html title tag
html title element
seo title in html
html title tag
meta tags
how to use the html title tag
tag and title
meta title
web page title
seo page title
title and tag
title tag seo
how to make the html title tag seo friendly
basic html tags
catchy web page title
html title tag defaults
html title tag attributes
html title examples

A newly-updated free resource. Connect and refer a friend today.