HTML Page Title

The HTML <title> element defines the title of the HTML document. The title is displayed in the browser's title bar or tab, and it's crucial for SEO (Search Engine Optimization) and user experience. Every HTML document should have exactly one <title> element.

Basic Title Syntax

The <title> element must be placed inside the <head> section of your HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <!-- Page content -->
</body>
</html>

Keep it Concise

Titles should be descriptive but concise. Most search engines display 50-60 characters:

<!-- Good titles -->
<title>Learn HTML - Free Tutorial</title>
<title>Web Development Guide</title>
<title>JavaScript Functions Explained</title>

<!-- Too long titles -->
<title>This is a very long title that will be truncated in search results and browser tabs</title>

Be Descriptive

The title should accurately describe the page content:

<!-- Good descriptive titles -->
<title>How to Create HTML Forms - Complete Guide</title>
<title>CSS Flexbox Tutorial with Examples</title>
<title>Python for Beginners - Free Course</title>

<!-- Vague titles -->
<title>Page 1</title>
<title>Untitled</title>
<title>Home</title>

Include Keywords

Include important keywords naturally in your title for better SEO:

<!-- SEO-friendly titles -->
<title>HTML Tutorial for Beginners - Learn HTML Basics</title>
<title>Best CSS Frameworks 2024 - Comparison Guide</title>
<title>JavaScript Array Methods - Complete Reference</title>

Unique Titles

Each page should have a unique title to avoid duplicate content issues:

<!-- Different pages with unique titles -->
<!-- Home page -->
<title>WebDev Academy - Learn Web Development Online</title>

<!-- About page -->
<title>About WebDev Academy - Our Mission & Team</title>

<!-- Tutorial page -->
<title>HTML Basics Tutorial - WebDev Academy</title>

<!-- Contact page -->
<title>Contact WebDev Academy - Get in Touch</title>

Brand Name Placement

Decide whether to put your brand name at the beginning or end of the title:

<!-- Brand name at the end (recommended for most pages) -->
<title>HTML Tutorial - WebDev Academy</title>
<title>CSS Guide - WebDev Academy</title>

<!-- Brand name at the beginning (good for home page) -->
<title>WebDev Academy - Learn Web Development Online</title>

<!-- Using separators -->
<title>JavaScript Functions | WebDev Academy</title>
<title>Python Tutorial - WebDev Academy</title>

Common Patterns

Here are some common title patterns used on websites:

<!-- Tutorial/Guide pattern -->
<title>Topic Name - Tutorial/Guide</title>
<title>CSS Grid Layout - Complete Tutorial</title>

<!-- Review/Comparison pattern -->
<title>Product Name - Review & Comparison</title>
<title>VS Code vs Sublime Text - Editor Comparison</title>

<!-- How-to pattern -->
<title>How to Do Something - Step by Step Guide</title>
<title>How to Create a Website - Beginner's Guide</title>

Special Characters in Titles

You can use HTML entities in titles for special characters:

<!-- Using HTML entities -->
<title>HTML & CSS Tutorial</title>
<title>JavaScript: Arrays & Objects</title>
<title>Python > Java: Comparison</title>
<title>Web Development © 2024</title>
<title>Learn to Code < 30 Days</title>

<!-- Unicode characters -->
<title>Résumé Builder - Create Professional CVs</title>
<title>Café Menu - Coffee Shop Website</title>
<title>Naïve Bayes Algorithm - Machine Learning</title>

Title vs. Meta Description

The title is what appears in the browser tab and search engine results, while the meta description is a brief summary that appears below the title in search results.

<head>
  <!-- Title: Appears in browser tab and search results -->
  <title>HTML Tutorial - Learn Web Development</title>
  
  <!-- Meta description: Appears in search results snippet -->
  <meta name="description" content="Learn HTML basics with our comprehensive tutorial. Master web development fundamentals with examples and exercises.">
</head>

Title vs. Open Graph

The title is what appears in the browser tab and search engine results, while the Open Graph title is used when the page is shared on social media platforms like Facebook and LinkedIn.

<head>
  <!-- Title for search engines -->
  <title>HTML Tutorial - Learn Web Development</title>
  
  <!-- Open Graph title for social media -->
  <meta property="og:title" content="HTML Tutorial - Learn Web Development">
  <meta property="og:description" content="Master HTML with our comprehensive tutorial">
  <meta property="og:image" content="https://example.com/html-tutorial-image.jpg">
</head>

Common Title Mistakes

Here are some common mistakes to avoid when creating titles:

❌ Avoid These:

Keyword Stuffing: <title>HTML CSS JavaScript Tutorial Guide Course</title>
All Caps: <title>HTML TUTORIAL FOR BEGINNERS</title>
Generic Titles: <title>Home</title>, <title>Page</title>
Too Long: <title>This title is way too long and will be truncated in search results making it ineffective for SEO</title>
No Title: Forgetting to include a title element
Duplicate Titles: Using the same title across multiple pages

✅ Do This Instead:

Natural Language: <title>HTML Tutorial for Beginners - Learn Web Development</title>
Proper Capitalization: <title>HTML Tutorial for Beginners</title>
Descriptive: <title>Complete HTML Tutorial with Examples</title>
Optimal Length: Keep titles under 60 characters
Unique: Each page gets its own unique title