Previous
Written by: rJTutorial Team | Last Updated:

HTML Title

In HTML, the <title> element is a mandatory part of every document. It defines the text that appears in the browser's title bar or the page's tab. While it might seem like a small detail, it is one of the most critical elements for both User Experience (UX) and Search Engine Optimization (SEO).

The title serves three primary purposes:

  • Browser Tabs: It helps users identify your page when they have multiple tabs open.
  • Search Results: Search engines like Google use the title as the clickable headline in search results.
  • Bookmarks: When a user saves your page to their favorites, the title is the default name used for the bookmark.

Here is how you implement the <title> element within the structure of a standard HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="A brief description of the page content for search engines.">
   <meta name="author" content="Your Name">
   
   <!-- This is the title element -->
   <title>Contact Us | Awesome Web Services</title>
</head>
<body>
   <h1>Get in Touch</h1>
   <p>Welcome to our contact page.</p>
</body>
</html>
Developer Tip: When building modern web apps with frameworks like React, Vue, or Angular, you can update the document title dynamically using document.title = "New Title" to reflect the user's current view.

Breaking Down the Example

In the code snippet above, we see several important tags within the <head> section:

  • <title>: This sets the text "Contact Us | Awesome Web Services" as the page identity. This should be unique for every page on your website.
  • <meta charset="UTF-8">: This ensures that your page displays text characters correctly, including emojis or special symbols.
  • <meta name="description">: While the title is the headline in search results, the description is the short summary (snippet) that appears below it.
Best Practice: Keep your titles between 50 and 60 characters. Search engines often cut off (truncate) titles that are longer than this, which can make your site look less professional in search results.

Real-World Title Examples

Choosing a generic title like "Home" or "Index" is a missed opportunity. Instead, follow these professional patterns:

  • E-commerce Product: <title>Blue Suede Shoes - Men's Footwear | ShoeStore</title>
  • Blog Post: <title>10 Tips for Better CSS Layouts - WebDev Blog</title>
  • Service Page: <title>Affordable Web Design Services in New York</title>
Watch Out: The <title> tag can only contain plain text. You cannot put other HTML tags (like <strong> or <img>) inside a title. If you do, the browser will render them as literal text strings.
Common Mistake: Forgetting to change the title when copying a template. Nothing looks more amateur than a published website that still says "Document" or "Bootstrap Theme Example" in the browser tab.

You can replace "My Simple HTML Form" with any title that accurately represents your page. Remember that clarity is key; a user should know exactly what is on the page just by reading the tab title.

Previous