How and Why to Add a Title Tag in HTML

If you’ve been learning how to build a website, and are ready to make it live on the internet, you’ll need to make sure that you have a title tag in your HTML file.

What is a Title tag?

A title tag is where you can indicate the name of your HTML document or webpage. You can only have one title, so make sure it is eye-catching and SEO friendly! The title of your document/webpage is super important, especially when it comes to how your site looks to visitors, as well as when they do online searches for content that could bring them to your site! Let’s talk about two reasons why you need a title tag, and then learn how to add it to your HTML file!

1. Title Tags appear in your Web Browser

If you know that you are going to publish a site you are building, it is 100% critical that you include a title tag in your code. When a visitor lands on your website, they not only see the content on your landing page, but they also see the Title tag in their web browser tab. Here’s an example of the title tag appearing in the browser tab:

Without clearly indicating the title of your HTML document, in a Title tag, you may not have control over what appears in the browser tab!

2. Title Tags appear in Searches

The second reason why you need a title tag is because your title is what appears in search engines! If a person is searching up content that is related to what you create, make sure your title is super clear! Title clarity helps to make your website even more enticing for the searcher. They’ll know that you have exactly what they’re looking for. Additionally, title clarity helps with Search Engine Optimization (SEO), as your title will be crawled to determine if your site is a possible match for a searcher. Here’s an example of the title tag appearing in a search engine search.

It is important to make sure your title is not too short. It is also important to make sure your title is not too long. A lengthy title can get cut off in the search results display! A good estimate of characters is around 55 characters. I use sites like lettercount.com to help me ensure my titles aren’t too long.

How to Create a Title Tag

Now that you’ve seen two reasons why you need a title tag, let’s take a look at how you add one to your site.

To start, let’s take a look at a simple HTML document.

This doc has the basics: html tag, head tag, meta tag, body tag, main tag, etc. But when we try to view it live, something is missing!

This doc technically isn’t even rendering as a site, as you can see in the image above. What is happening?!

Oh right! It’s missing a title tag.

To add a title tag you will use an opening and closing <title> tag. Here’s how to write it out:

<title> Your Title Here </title>
or 
<title> Your Title Here | Extra Text </title>

And in your HTML document, it will look like this:

Notice the title tag is located within the opening and closing head tag. It is super important that you place your title tag there, as this is an additional piece of meta-information about your site.

Once you’ve saved your document, you can view it in a web browser:

Viola! You now have a title that will appear on the tab of your website as well as in search engine searches!

Final Thoughts

As you start to think about your site title, make sure to always remember that the title will be what your visitors see when they search for content that is related to your site. You’ll want to make your title clear, catchy and concise.

Tip: You can use symbols such as ‘|’ to help break up your titles!

How do you come up with your site titles? Let me know in the comments below!

Leave a Comment!