HTML <title> Tag

The HTML <title> tag defines the title of a webpage. This title is displayed in the browser’s title bar, tabs, and bookmarks. It is also used by search engines as the clickable headline in search results, making it a critical component for SEO (Search Engine Optimization) and user experience.

The <title> tag must be placed within the <head> section of an HTML document and is mandatory for every webpage.

Basic Syntax of HTML <title> Tag

The basic structure of the <title> tag is:

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <title>Your Webpage Title</title>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
    </body>
</html>
HTML <title> Tag Example

Explanation: The text inside the <title> tag (“Your Webpage Title”) appears on the browser tab and search engine results.

Example of a Well-Defined Title

The following example shows a clear, concise title for a webpage:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <title>Best Recipes for Healthy Living</title>
    </head>
    <body>
        <h1>Healthy Recipes for Every Meal</h1>
        <p>Explore our collection of nutritious recipes.</p>
    </body>
</html>
Example of a Well-Defined Title

Explanation: The title is specific and descriptive, improving both usability and SEO by clearly communicating the purpose of the webpage.

Importance of the <title> Tag

  • Search Engine Optimization (SEO): Search engines use the title to determine the relevance of a webpage to user queries. A well-crafted title improves visibility.
  • User Experience: Titles are displayed on browser tabs, helping users identify and switch between open pages easily.
  • Bookmarking: When a page is bookmarked, the title appears as the name of the bookmark, making it easier to recognize later.

Best Practices for the <title> Tag

  • Be Descriptive: Clearly describe the content of the page in the title.
  • Keep it Short: Limit the title to around 50-60 characters to ensure it is fully displayed in search results.
  • Include Keywords: Incorporate primary keywords relevant to the page’s content for better search engine rankings.
  • Make it Unique: Use unique titles for every page to avoid duplication and confusion.
  • Reflect Branding: Add your brand or website name for recognition, especially for home or landing pages.

Example of a Title with Branding

Here’s an example of a title that includes branding:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <title>Contact Us - Healthy Living Recipes</title>
    </head>
    <body>
        <h1>Get in Touch</h1>
        <p>We’d love to hear from you. Contact us today!</p>
    </body>
</html>

Explanation: The title clearly indicates the page purpose (“Contact Us”) while reflecting the brand (“Healthy Living Recipes”).

Styling or Modifying Titles with JavaScript

You can dynamically modify the <title> tag using JavaScript:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
    </head>
    <body>
        <h1>Welcome to Our Website</h1>
        <script>
            document.title = "Updated Title - Our Website";
        </script>
    </body>
</html>
Styling or Modifying Titles with JavaScript

Result: The title initially displays “Welcome” but changes dynamically to “Updated Title – Our Website” when the script is executed.

Practical Applications of the <title> Tag

  • SEO Optimization: Use relevant keywords to improve rankings and click-through rates.
  • Page Differentiation: Assign unique titles to help users identify specific pages within the website.
  • Dynamic Titles: Use JavaScript to update titles based on user actions or dynamic content changes.
  • Enhanced User Experience: Provide clear, concise titles for better browser navigation and bookmarking.