HTML Zero → Mastery — Lesson 10: The <title> Element

Learning Goals

Understand the purpose of the <title> element.
Learn how it appears in browser tabs, bookmarks, and search engines.
Apply best practices for accessibility and SEO.
Avoid common mistakes when setting page titles.

Part 1 — What `<title>` Does

The <title> element sits in the <head> of your page and provides the official page title. Unlike <h1>, it does not show on the page itself, but it is visible in:

Browser Tabs: The clickable tab label.
Bookmarks: Used when a user saves the page.
Search Results: Appears as the main clickable headline in Google and other search engines.
Accessibility: Screen readers announce it as the page’s name.

Think of it as the book title on the cover; <h1> is the chapter heading inside.

Part 2 — Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Portfolio — Jane Doe</title>
  </head>
  <body>
    <h1>Welcome to my portfolio</h1>
    <p>I design and build modern web applications.</p>
  </body>
</html>

Part 3 — Best Practices

Keep it short (50–60 characters max).
Make it descriptive and unique per page.
Include your brand name if relevant.
Avoid vague titles like “Home” or “Untitled.”
Write for humans first — don’t stuff keywords.

Part 4 — Common Mistakes

❌ Leaving the title empty → browser shows “Untitled.”
❌ Using the same title for all pages → confuses users & search engines.
❌ Making it too long → search engines truncate it.
❌ Putting <title> in the <body> → invalid markup.

Quick Quiz

Where should the <title> element be placed?
What role does it play in search engines?
How many <title> tags can you have per page?

Sample Answers

Inside the <head>.
It’s the clickable headline in search results.
One — multiple <title> tags are invalid.

Mini Project — Title Workshop

Create three simple HTML files:

index.html → “Portfolio — [Your Name]”
about.html → “About Me — [Your Name]”
contact.html → “Contact — [Your Name]”

FAQ

Q: Can I use emojis in titles?
A: Yes, but sparingly — they may be cut off in some search results.

Q: Should titles match <h1>?
A: They should be similar, but the <title> can include branding or context.

Lesson 10 Dictionary

B
Bookmark Title: The text label used when saving a page as a favorite in a browser.
S
SEO (Search Engine Optimization): Practice of improving pages so search engines rank them higher. Titles are a major factor.
T
<title>: Defines the document’s title, shown in browser tabs, bookmarks, and search results.