HTML Tutorial: HTML Page Title
Learn how to set page titles for SEO, browser tabs, and user experience
The <title> tag defines the title of a webpage. It appears in browser tabs, search engine results, and bookmarks.
1️⃣ Basic Page Title
INPUT:
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
Welcome to my website!
</body>
</html>
OUTPUT:
Browser tab shows: My Awesome Website
✔️ Always place <title> inside <head>
✔️ Important for SEO and usability
2️⃣ Dynamic Page Titles
You can change titles for different pages using the <title> tag.
INPUT:
<!-- home.html -->
<title>Home - My Website</title>
<!-- about.html -->
<title>About Us - My Website</title>
OUTPUT:
Home page tab: Home - My Website
About page tab: About Us - My Website
✔️ Each page should have a unique title for SEO ✔️ Helps users identify pages easily in tabs or bookmarks
3️⃣ SEO-Friendly Titles
Best practices for page titles:
- Keep titles under 60 characters
- Include keywords relevant to content
- Make them descriptive and easy to read
- Use branding at the end (e.g., " - My Website")
Example:
<title>Learn HTML Tutorial - Jaangirde</title>
OUTPUT:
Browser tab shows: Learn HTML Tutorial - Jaangirde
🎯 Best Practices
- Use unique and descriptive titles for each page
- Include important keywords at the beginning
- Keep it concise and under 60 characters
- Use brand name for recognition
🚀 What’s Next?
👉 HTML Tables
Next lesson will cover:
- Creating tables using
<table>tag - Table rows, columns, headers, and footers
- Styling tables for better readability
Page titles are essential for SEO, browser tab clarity, and a professional user experience.