👀 Live Preview
How the title appears in a browser tab (mockup):
HTML title Tag — CodeToFun
HTML <title> Tag
Overview
What You’ll Learn
The <title> tag defines your page name for browsers and search engines. This guide covers syntax, placement in head, browser tabs, SEO, title vs h1, and best practices for beginners.
Title Syntax
Write a valid <title> inside <head>.
Browser Tabs
Control the label users see on each tab.
SEO Titles
Craft keyword-rich, descriptive page titles.
title vs h1
Know metadata title vs visible heading.
Length Limits
Keep titles concise for search snippets.
Best Practices
Unique, accurate titles on every page.
Fundamentals
What Is the <title> Tag?
The title element (<title>) defines the document title of an HTML page. It lives in the <head> section and is not visible on the page itself. Instead, browsers use it for tab labels, bookmarks, history entries, and search engine result headlines.
Every HTML document needs a title
HTML requires exactly one <title> in <head>. Without it, the browser tab shows the file URL or a generic label—poor for users and SEO.
The title tag might look simple, but it is one of the most important elements for user experience and discoverability. A clear title tells visitors what page they opened before they even read the content.
Foundation
📝 Syntax
Place <title> inside <head> with plain text content:
syntax.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Your Page Title</title>
</head>
<body>
<!-- Your page content here -->
</body>
</html>Syntax Rules
- Exactly one
<title>per document, inside<head>. - Content is plain text only—no nested HTML elements inside
<title>. - You may use character entities (e.g.
—) for special characters. - The title tag has no tag-specific attributes.
- Do not confuse
<title>(document metadata) with<h1>(visible page heading).
Cheat Sheet
⚡ Quick Reference
| Topic | Rule / Pattern | Notes |
|---|---|---|
| Location | <head> only | Never in body |
| Count | Exactly one per page | Required in HTML |
| Content | Plain text | No child elements |
| Browser tab | Tab label | Also bookmarks & history |
| SEO length | ~50–60 characters | Avoid truncation in SERPs |
| vs h1 | title = metadata | h1 = visible heading |
Comparison
⚖️ <title> vs <h1>
Beginners often mix these up. They serve different purposes:
| Feature | <title> | <h1> |
|---|---|---|
| Location | <head> | <body> |
| Visible on page? | No | Yes |
| Shown in browser tab? | Yes | No |
| Primary SEO role | Search result headline | On-page content structure |
| Example | <title>About Us — Acme Co</title> | <h1>About Our Team</h1> |
Reference
🧰 Attributes
The <title> tag has no tag-specific attributes. Its content is typically plain text, but you can use HTML character entities for special characters:
title-entities.html
<title>Learn HTML & CSS — Beginner Guide</title>Text content RequiredThe document title string. Keep it descriptive and unique per page.
Your Page TitleCharacter entities OptionalUse entities like &, —, or © in the title text.
—Global attrs Not usedclass, id, and style are invalid on <title> in valid HTML.
N/AHands-On
Examples Gallery
Basic document titles, browser tab labels, and SEO-friendly titles with copy-ready code and live previews.
Basic Page Title
The simplest use of <title>—a descriptive name inside <head>:
basic-title.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Page Title</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>📚 Common Use Cases
Developers use <title> for browser tab labels, bookmarks, search engine listings, and social sharing previews (via Open Graph, which often mirrors the title).
Browser Tab Display
The text inside <title> is what appears on the browser tab when a user visits your page. It gives a concise, informative label before they read the body content:
browser-tab-title.html
<head>
<title>Contact Us — Acme Company</title>
</head>
<body>
<h1>Get in Touch</h1>
<p>We would love to hear from you.</p>
</body>Search Engine Optimization (SEO)
Search engines use the <title> tag as the primary headline in search results. A meaningful, keyword-relevant title helps users find your page and can improve click-through rates:
seo-title.html
<head>
<meta charset="UTF-8">
<title>HTML title Tag Guide — Browser Tabs & SEO | CodeToFun</title>
<meta name="description" content="Learn how to use the HTML title tag for browser tabs, bookmarks, and SEO.">
</head>A11y
♿ Accessibility
- Title is announced indirectly — Screen readers typically read the document title when the page loads, helping users confirm they landed on the correct page.
- Make titles descriptive — Avoid generic titles like “Home” or “Untitled” when the page has a specific purpose.
- Pair with a clear h1 — The visible
h1should reinforce (not duplicate verbatim) the document title for in-page context. - Unique per page — Identical titles on multiple pages confuse users relying on tabs, history, and assistive tech page lists.
🧠 How <title> Works
1
Author sets the title in head
Plain text inside <title> names the document.
Markup
2
Browser reads document.title
The label appears on the tab, in bookmarks, and in browsing history.
Browser UI
3
Search engines index the title
Crawlers use <title> as the primary search result headline.
SEO
=
A named, discoverable page
Users recognize your page in tabs and search; machines understand what the document is about.
Compatibility
Browser Support
The <title> tag is supported in all browsers, including legacy Internet Explorer. It has been part of HTML since the earliest web browsers.
Baseline · Since HTML 2.0
Universal document title support
Every browser renders <title> as the tab label and exposes it via document.title.
100% Core tag support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer Fully supported · EOL
Full supportOpera Fully supported
Full support<title> tag 100% supported
Bottom line: Use <title> on every page—it works everywhere.
Wrap Up
Conclusion
The <title> tag might seem simple, but its impact on user experience and SEO is profound. Crafting well-thought-out, descriptive titles enhances the visibility of your web pages and contributes to a positive user journey.
Mastering the <title> tag is a fundamental skill for any web developer. Ensure every page has a unique, accurate title inside <head>, and pair it with a clear visible h1 in the body.
Pro Tips
💡 Best Practices
✅ Do
- Keep titles concise—ideally 50–60 characters for search results
- Make titles unique and specific to each page
- Accurately reflect the page content for users and SEO
- Include your brand name at the end when helpful
- Use a descriptive
h1alongside the document title
❌ Don’t
- Use generic titles like “Home” on every page
- Stuff keywords unnaturally into the title
- Put HTML elements inside
<title> - Duplicate the same title across unrelated pages
- Confuse
<title>with<h1>
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about <title>
Bookmark these before you publish your next page.
5
Core concepts 01
Document Name
<title> names the page for browsers, bookmarks, and search engines.
02
Inside head
Exactly one title element per document, never in the body.
Placement 03
SEO Headline
Search engines use title as the primary result link text.
SEO 04
Not the h1
Title is metadata; h1 is the visible on-page heading.
Comparison 05
100% Support
Works in every browser ever built for the web.
Compatibility❓ Frequently Asked Questions
The
<title> element defines the document title shown in browser tabs, bookmarks, history, and search engine results. It belongs in <head>.Place exactly one
<title> inside <head>. It must not appear in <body>.<title> is metadata in head for tabs and SEO. <h1> is the visible main heading users see on the page in body.Aim for 50–60 characters so the full title displays in search results and browser tabs without being cut off.
Yes. Search engines use
<title> as a primary ranking signal and as the clickable headline in search result listings.No. The title element contains plain text only. Use character entities (like
—) for special characters, not HTML tags.Write your first page title
Practice <title> inside <head> in the Try It editor.
About the author
5 people found this page helpful