<title> tag is one of
several important tags the developer places in every HTML document.
<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.
<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.
<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
<h1> element text the
reader typically first sees, however the two are often similar.
<title> tag for HTML5 is a
two-part tag so it must be closed with the
There is only one
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
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.
The example above shows the common and basic placement of a web page title.
As with all tags, Global Attributes can always be set, but no other attributes are common or required.
Each user-agent (browser) has its own stylesheet per se. This dictates
how that browser styles each element by default. The Chrome browser
<title> element using
the following specifications.
The following code will set up a document with meta settings for the encoding, viewport, page title and description.
The following code illustrates the point about the similarities between web page titles and headings with a real example from this page.
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.
<title> tag is paired
with other essential tags that should be included in every HTML
Have you seen our YouTube Channel yet? Subscribe here and see if the videos help you learn faster.
<p>tag for paragraphs, click Back.
<a>tag, click Next.