The HTML <title> tag defines the title of a web page. This title appears in the tab bar on your browser and when you add a page to your bookmarks list. All web pages should contain a <title> tag.
When you’re building a web page, you’ll want to specify a title for that web page. For instance, say you’re building a home page for a local bakery’s website. You may want the name of the bakery to appear as the title of the web page.
That’s where the <title> HTML tag comes in. The <title> tag defines the title of a document in HTML and is placed within the head section of a web page. This tutorial will discuss, with reference to an example, the importance of the <title> tag, and how you can use it in your code.
HTML Head Refresher
In HTML, the <head> element is used to store heading elements. These elements provide additional information about a web page, such as the icon that should appear for the web page.
Together, the elements in the <head> section describe core information about a document. They can point the browser to the style sheets and scripts used in a document (if any are used).
HTML <title>
The HTML <title> tag is defines title of the document. This tag appears within the <head> tag. This tag should summarize the purpose of a web page. You only need to specify one <title> tag per page.
Let’s look at the syntax for this tag:
<head> <title>Home | Career Karma</title> </head>
The <title> tag has both an opening and closing tag. Between these tags, we have written a title for a web page.
The text in our <title> tag does not show up on the web page. This is because our <title> tag is enclosed in the <head> rather than the <body> tag on our web page.
Our above title is strong because it tells the user exactly what page they are viewing. We have also specified the site name which prevents confusion if a user has multiple tabs open in view with the title “Home”.
Your title should be clear, easy to read, and not too long. Consider the following examples of titles:
- Blog – Career Karma
- Contact Career Karma
- Career Karma Blog
All of these titles convey the purpose of the page. Your title should not be too long because titles only have limited space in the tab bar.
The <title> tag supports all global attributes in HTML5. This tag is supported by all major modern browsers. The title tag does not have any element-specific HTML attributes.
HTML Title Tag Example
The HTML title element is defined within the <head> tag on an HTML page. Suppose we are building a web page for our local bakery, Joseph Abrams & Sons. We are currently building the home page, and we want the name of the bakery to appear in the site’s title.
We could use the following code to set the title of our page to “Joseph Abrams & Sons.“:
<head> <title>Joseph Abrams & Sons.</title> </head>
When the web page for our site is opened, the title of the page is set to “Joseph Abrams & Sons“.
Now, say we are building a contact page for our local bakery from earlier. We may want to use the title “Contact | Joseph Abrams & Sons“. This title is simple and also describes the purpose of our web page well.
Why Should You Use a <title> Tag?
There are a number of reasons why specifying a document title tag is important.
First, the <title> tag displays the page title in the web browser’s title bar. For instance, the title of this page is “HTML Title Tag: A How-To Guide | Career Karma“. This appears in the name of this site’s tab.
Second, the <title> tag labels the web page when it is bookmarked or saved as a favorite in the user’s web browser. The title you specify will be the one automatically saved. If you don’t use an appropriate title for a web page, a user may find it difficult to discover your page in their bookmarks.
Search engines depend on the contents of a title tag. The title specified in a title tag will the web page headline on a Search Engine Result Page (SERP). The SERP is an entry on a search results page.
In addition, the contents of the <title> tag are used to determine the topic of the web page by search engines.
So, now we know that <title> tags are important, you may be asking: how do I use the HTML title tag? Let’s answer that question.
Conclusion
The <title> tag is states the title of an HTML document. This title appears in the web browser’s tab names. It is also used by search engines when processing a web page to decide on its headline and topic.
This tutorial discussed, with reference to an example, the basics of the HTML <title> tag. Now you’re ready to start using the title tag like an HTML expert!
Do you want to learn more about coding in HTML? Check out our How to Learn HTML guide. This guide contains a list of top learning resources and courses for beginner and intermediate developers. You’ll also find top books to read on the subject of HTML.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
