HTML Page Title

📋 What is a Page Title?

The page title appears in the browser tab and is used by search engines. It's defined using the <title> tag in the <head> section.


<title>My Amazing Website</title>

🔹 Adding a Page Title

Every HTML page should have a title:

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to My Blog</title>
</head>
<body>
    <h1>My Blog Posts</h1>
    <p>Check the browser tab to see the title!</p>
</body>
</html>

Browser Tab Shows:

📄 Welcome to My Blog

🔹 Title Best Practices

✅ Good Titles:

Keep it under 60 characters
Be descriptive and specific
Include important keywords
Make it unique for each page

🔸 Examples of Good Titles

<!-- For a home page -->
<title>John's Portfolio - Web Developer</title>

<!-- For a blog post -->
<title>How to Learn HTML - Beginner's Guide</title>

<!-- For a contact page -->
<title>Contact Us - ABC Company</title>

🔹 Changing Titles with JavaScript

You can change the page title dynamically:

<!DOCTYPE html>
<html>
<head>
    <title>Original Title</title>
</head>
<body>
    <h1>Dynamic Title Demo</h1>
    <button onclick="changeTitle()">Change Title</button>
    
    <script>
        function changeTitle() {
            document.title = "New Title - Updated!";
        }
    </script>
</body>
</html>

Try it:

Click the button and check the browser tab!

🔹 Why Titles Matter

🔍

Search Engines

Titles appear in search results

📱

Social Media

Used when sharing links

📑

Bookmarks

Default name for bookmarks

👥

User Experience

Helps users identify tabs