HTML Free Codes<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
<title> tag in the <head> section of your HTML document. There should be only one title element per document.
Browser Support
The <title> tag is supported in all major browsers:
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 Rankings: Search engines use the title as a primary ranking factor
- 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 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
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.