Home / HTML / Page Title

HTML Page Title

What is the Page Title?

The HTML page title is defined using the <title> element in the <head> section. It appears in the browser tab, bookmarks, search engine results, and browser history. The title is crucial for SEO (Search Engine Optimization) and user experience.

Basic Title Syntax

The <title> element is placed in the <head> section and contains the text that will appear as the page title:

Example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
</body>
</html>

Where the Title Appears

The page title appears in several places:

Title Requirements

The <title> element is required in HTML5. Every HTML document must have exactly one <title> element in the <head> section:

Example - Valid
<head>
    <title>My Page Title</title>
</head>
Example - Invalid (Don't Use)
<!-- Invalid: Multiple title elements -->
<head>
    <title>First Title</title>
    <title>Second Title</title>
</head>

<!-- Invalid: Title in body -->
<body>
    <title>Title in Body</title>
</body>

Title Best Practices for SEO

To optimize your page title for search engines:

1. Keep it Concise

Keep titles between 50-60 characters to avoid truncation in search results:

Example - Good
<title>HTML Tutorial - Learn Web Development</title>
Example - Too Long (Bad)
<title>This is a very long title that will be truncated in search engine results and won't display properly</title>

2. Make it Descriptive

Include relevant keywords that describe the page content:

Example - Good
<title>HTML Forms Tutorial - Complete Guide to Form Elements</title>
Example - Not Descriptive (Bad)
<title>Page 1</title>

3. Be Unique

Each page should have a unique title that reflects its specific content:

Example - Good
<!-- Homepage -->
<title>HTML Tutorial - Home</title>

<!-- Forms page -->
<title>HTML Forms Tutorial - Complete Guide</title>

<!-- Tables page -->
<title>HTML Tables Tutorial - How to Create Tables</title>
Example - Bad (All same)
<!-- All pages have the same title -->
<title>My Website</title>

4. Include Branding

You can include your site name or brand, but don't make it the primary focus:

Example - Good
<title>HTML Tutorial - Learn Web Development | The World of Computing According to Dave</title>

Title Formatting

You can format the title text, but only text formatting is allowed (not HTML elements):

Example
<!-- Valid: Text only -->
<title>My Page Title</title>

<!-- Invalid: HTML elements not allowed -->
<title><strong>My</strong> Page Title</title>
<title><br>My Page Title</title>

Dynamic Titles

You can change the page title dynamically using JavaScript:

Example
<!DOCTYPE html>
<html>
<head>
    <title>Default Title</title>
</head>
<body>
    <button onclick="document.title = 'New Title'">Change Title</button>
    <script>
        // Change title after 3 seconds
        setTimeout(function() {
            document.title = 'Updated Title';
        }, 3000);
    </script>
</body>
</html>

Title for Different Pages

Here are examples of good titles for different types of pages:

Homepage

Example
<title>The World of Computing According to Dave - Learn Web Development</title>

Tutorial Page

Example
<title>HTML Forms Tutorial - Complete Guide to Form Elements</title>

Article/Post Page

Example
<title>How to Create HTML Tables - Step-by-Step Tutorial</title>

Contact Page

Example
<title>Contact Us - The World of Computing According to Dave</title>

Title vs. H1

It's important to understand the difference between the <title> and <h1> elements:

Element Purpose Location
<title> Page title for browser tab, SEO, bookmarks In <head> section
<h1> Main heading visible on the page In <body> section
Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML Tutorial - Learn HTML</title>
</head>
<body>
    <h1>Welcome to HTML Tutorial</h1>
    <p>Content here...</p>
</body>
</html>

Best Practices

← Favicon HTML Tables →