HTML <title> Tag Tutorial - Usage, Syntax, SEO and Best Practises

calender-iconPublished: 11 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

The <title> element is used to define the title of webpage. The main purpose of this tag is to give information about the webpage to both users and search engine.

Syntax: The <title> Tag should always be written within the <head> section of webpage. 


<head>
  <title> Title Text </title>
</head>
Places where Title Appears

It is shown at three important places on webpage.

  • SERPs - It appears as part of the clickable headline that appears in Search engine results page. It is very important form the perspective of user experience as it's the first thing a user reads in SERPs and decides whether to click on the link or not.
  • Browser Tab - It appears as text shown in top browser tab of the page.
  • Social Media Links - It appears as title of preview when link is shared on social media.
SERP

SERP

browser-tab

browser-tab

Attributes

The element only includes global attributes.

Page Title Usage Guidelines for SEO

The main purpose of this tag is to give information about the webpage to both users and search engine. This brief overview about webpage's content helps search engine to better understand the page's content.

  • Length - Title tag should be 50 - 60 characters long because longer title is not shown fully in SERP hence does not convey full meaning or can be rewritten by google.
  • Primary Keyword - Include your primary keyword in title to help user and search engines better understand content. But don't overstuff keywords, which can be viewed as spammy and may penalise your ranking.
  • Language - Keep the language simple for describing content. You should avoid repeating words.
  • Symbols - Save space by using symbols like "&" instead of "and" and use narrow separators like colons(:) or pipes(|).
  • H1 header - Match your header H1 tag with title tag so as not to confuse search engines and users.

Frequently Asked Questions (FAQ)

Does the <title> element need to be in the <head> element?
Yes, the <title> element must be placed inside the <head> element in a HTML document. This is what the mdn web doc has to say about it:
The <title> element is always used within a page's <head> block.

Is it allowed to use other tags inside <title> element?
No, the <title> element cannot contain other HTML tags. It only accepts plain text.

What is the title element limit in HTML?
While HTML itself imposes no strict character limit, practical limits arise from browser behaviour, search engine optimization (SEO), and usability. Most modern browsers (Chrome, Firefox, Safari, Edge) render long titles but may truncate them in the tab bar or window title due to display constraints.

Google: Displays approximately 60–70 characters (or ~600 pixels) in search engine results pages (SERPs) before truncating with an ellipsis (…). This includes spaces and punctuation.

What is the difference between the title tag and the title attribute in HTML?
Title Tag:
It Defines the title of the entire HTML document. and must be placed within the head section.

Title Attribute:
It Provides additional information about an element and can be added to most HTML elements.

Which html element defines the title of a document?
The <title> HTML element defines the title of a document. It is placed within the <head> section of an HTML document and specifies the text displayed in the browser's tab, window title, bookmarks, and search engine results pages (SERPs)