HTML5 Title Tag

In this tutorial, we’ll teach you how to use the HTML5 title tag.

Here is a code example for that:

<!DOCTYPE html>
<html>
<head>
    <title> HTML Title Tag </title>
</head>
<body>
    <h1> This is a heading </h1>
    <p> This is a paragraph </p>
</body>
</html>

The output of this code will be

HTML5 Title Tag

The HTML5 title tag assigns the title to the document and is always displayed at the page’s tab. Moreover, it will also be used as the bookmark name when adding a page to your Favorites.

If you try to compile your code without a title, you’ll experience the following error:

“Element head is missing a required instance of child element title.”

The content in the title is crucial for web page SEO. When Google search bot crawls the web page to rank them, it looks at the title to glean meaningful insights into the website content.

Therefore, selecting an SEO-friendly title is crucial for ranking your website at the top of Google searches.

Here are some key considerations that should be taken into account while assigning titles to the document.

Always select a long and descriptive title because short titles tend to create ambiguity.
All search engines only display 50-60 characters of your title, so avoid too long a title
Avoid using a list of words as the page title as it tends to de-rank your website in the search results.

The key takeaway here is that a meaningful and accurate title is always deemed a good development practice as it won’t only help in SEO but also improve readability.

Lastly, since you cannot place more than one title on one HTML file, you should be extra cautious while selecting a title for your web page.

Browser Support for HTML5 Title Tag

Here is the list of browsers html5 title tag supports

Google Chrome
Microsoft Edge
Opera

To learn more about title tags, read its documentation.

Next Lesson » « Previous Lesson