FactorPad
Faster Learning Tutorials

HTML title tag

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.
by Paul Alan Davis, December 14, 2018
Updated: December 19, 2018
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 Next

~/ home  / tech  / html5  / reference  / html title tag


HTML title tag

Beginner

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.


Other 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.

  • For the complete HTML tag list, click Outline.
  • To learn about the <p> tag for paragraphs, click Back.
  • To create a hyperlink with the <a> tag, click Next.

Outline Back Next

~/ home  / tech  / html5  / reference  / html title tag



 
 
Keywords:
html title
html title element
html title tag
html title tag attributes
seo title
html title tag examples
title tag
tag and title
meta title
web page title
seo page title
title and tag
title tag seo
basic html tags
catchy web page title
html title tag defaults