HTML: The Title Tag

HTML title tag

The <title> tag is used to represent the title of a HTML document.

It is a very important tag that helps people get an idea of what your document is about. Search engines show results with the title in larger font as the first line in the listing.

Google search results with title

A good rule of thumb to follow is to have your document title followed by a vertical pipe or hyphen, then your website name. This is to keep the title unique against many other documents that may have the same title returned in a search result. The company name and vertical pipe makes the title more unique and avoids conflict.

You want to put some careful thought in what the title text is going to be. Make it as relevant as possible to the document contents. Try to keep the number of characters to be less than 50-60 so that they don’t overwhelm the user when she reads it. Search engines will clip titles that are too long with ellipses.

Google Search title too big

Also, because the title has strong influence on relevancy, put your keywords in it but don’t overdo it with keyword stuffing. Just once for the main keyword is enough. With social networking being very important to sharing content and ideas, also consider how your title helps market your message.

In all modern desktop browsers, the title of the document will appear in the tab, thus helping users know what they are viewing:

Title of HTML document in browser tab

Example Usage:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>The Title Tag | Kobashi Computing</title>
  5.   </head>
  6.   <body>
  7.     <main>
  8.       <h2>The Title Tag</h2>
  9.       <p>Used to represent the title of a HTML document.</p>
  10.     </main>
  11.   </body>
  12. </html>

Of Interest