htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<title>

Defines the title of the document

Definition and Usage

The <title> element establishes the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

The <title> tag is required in HTML documents!

The contents of a page title is very important for search engine optimization (SEO). The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

  • Defines a title in the browser toolbar
  • Provides a title for the page when it is added to favorites
  • Displays a title for the page in search engine results
  • Is shown in browser tabs and history
  • Appears when sharing on social media platforms
Tip: You should always include a <title> tag in the <head> section of your HTML document. There should be only one title element per document.
Important: Keep your title length under 60 characters to ensure it displays properly in search results.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The <title> tag supports the Global Attributes in HTML.

The <title> tag has no specific attributes.

Examples

Basic Title

Define a simple page title:

Example

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tutorial - Learn HTML Free</title>
</head>
<body>
  <h1>Welcome to HTML Tutorial</h1>
</body>
</html>

Title with SEO Keywords

Include relevant keywords for search engine optimization:

Example

<head>
  <title>Best Web Development Courses 2025 | Learn HTML, CSS, JavaScript</title>
</head>

Homepage Title

Create an effective homepage title with branding:

Example

<head>
  <title>HTML Free Codes - Best Free HTML Tutorial Since 2008</title>
</head>

Product Page Title

Optimize title for e-commerce product pages:

Example

<head>
  <title>Wireless Bluetooth Headphones - Premium Sound Quality | TechStore</title>
</head>

Blog Post Title

Structure a blog post title for better SEO:

Example

<head>
  <title>10 HTML Best Practices Every Developer Should Know | Web Dev Blog</title>
</head>

404 Error Page Title

Create a descriptive title for error pages:

Example

<head>
  <title>404 - Page Not Found | HTML Free Codes</title>
</head>

Social Media Optimized Title

Combine with Open Graph meta tags for social sharing:

Example

<head>
  <title>Complete Guide to HTML5 Semantic Elements</title>
  <meta property="og:title" content="Complete Guide to HTML5 Semantic Elements">
  <meta property="og:description" content="Learn how to use HTML5 semantic elements to create better-structured web pages.">
  <meta name="twitter:title" content="Complete Guide to HTML5 Semantic Elements">
</head>

SEO Importance

The <title> tag is one of the most important on-page SEO elements. Here's why:

  • Search appearance: A descriptive title helps identify the page. Google may generate its title link from several on-page sources.
  • Click-Through Rate: Compelling titles increase clicks from search results
  • User Experience: Clear titles help users understand page content
  • Social Sharing: Titles appear when pages are shared on social media
  • Browser History: Users can find pages more easily in their history
Best Length: Keep titles between 50-60 characters (about 600 pixels) to avoid truncation in search results.

Best Practices

  • Be Descriptive: Accurately describe the page content
  • Be Concise: Keep titles under 60 characters for optimal display
  • Be Unique: Every page should have a unique title
  • Include Keywords: Put important keywords near the beginning
  • Include Branding: Add your site/brand name at the end (optional)
  • Avoid Keyword Stuffing: Don't repeat keywords unnecessarily
  • Use Separators: Use pipes (|), hyphens (-), or colons (:) to separate elements
  • Write for Humans: Titles should be readable and compelling, not just for SEO
  • Match Content: Ensure title accurately reflects page content
  • Avoid All Caps: Use proper capitalization for better readability
Title Formula: Primary Keyword - Secondary Keyword | Brand Name

Try it Yourself

Interactive Example

The current page title is displayed in your browser tab above. Try changing it with JavaScript:

Click the buttons above and watch the browser tab title change!

Default CSS Settings

The <title> element is not rendered on the page, so it has no CSS styling.

Related Tags

  • <meta>

    Defines metadata about the document

  • <head>

    Contains metadata and document information

  • <link>

    Links external resources to document

  • <base>

    Specifies base URL for relative links

  • <style>

    Defines style information for document