HTML title Tag - Code a Catchy SEO-Friendly Title that People Click | HTML Tags List

Understanding the 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.

HTML title Tag Reference and Examples