- <hr> tag
- <nav> tag
- <pre> tag
- <td> tag
- <th> tag
- <tr> tag
- Anchor tag
- Article tag
- Attributes
- Audio tag
- Blink tag
- Block elements
- Blockquote
- Bold
- Buttons
- Canvas element
- Center text
- Checkbox
- Comment
- Data attribute
- datalist tag
- Div
- Doctype
- Entities
- Figure tag
- Font color
- Font size
- Footer
- Form
- Global attributes
- Header tag
- iFrame
- Images
- Inline elements
- Inline style attribute
- Input element
- Italic
- Label
- Lang attribute
- Line break
- Linking local webpages
- Links
- Marquee tag
- Metadata
- Ordered lists
- Paragraph tag
- Radio button
- Script tag
- section tag
- Select
- Semantic elements
- Space
- Span tag
- Strikethrough
- Style tag
- Subscript
- Superscript
- Table
- Textarea
- Title attribute
- Title tag
- Tooltip
- Underline
- Unordered lists
- Video tag
- What is HTML?
HTML
HTML Title Tag: Syntax, Usage, and Examples
The title tag sets the page title that appears in the browser tab and usually shows up as the clickable headline in search results. It’s a small line of HTML that can have a big impact on clarity, sharing, and SEO.
How to Use the Title Tag
The title tag is the <title> element, and it belongs inside the <head> section of an HTML document.
Learn HTML on Mimo
<head>
<title>Your Page Title</title>
</head>
A few rules to keep in mind:
- Use exactly one
<title>element per page. - Put it inside
<head>, not inside<body>. - Write plain text inside
<title>. Avoid nesting other tags.
Here’s a minimal HTML5 document showing the title element in context:
<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8" />
<title>Beginner JavaScript Tips | Mimo</title>
</head>
<body>
<h1>Beginner JavaScript Tips</h1>
</body>
</html>
When to Use the Title Tag
You should use the title tag on every page, but it’s especially important in these situations:
Give people a clear browser tab label
Most people keep a bunch of tabs open. A good title helps them find your page again instead of playing “guess the tab” like it’s a party game.
If your title is just “Home” or “Untitled,” you’re making life harder than it needs to be.
Improve search visibility and click-through rate
Search engines often use the title element as the main headline shown in results. A good title can make the difference between someone clicking your page or scrolling past it.
A title that matches what the page delivers also reduces “bounce,” because people know what they’re getting.
Make shared links look better
When you paste a link into a chat app, social network, or bookmark list, the page title is frequently used as the default label. A descriptive title tag helps your link look like something real, not like a mysterious file someone shouldn’t open.
Examples of the Title Tag
Below are several common, practical examples. Each one shows a different goal, and each title is written to match the page content.
1) A blog post title that matches a search intent
<head>
<title>Title Tag Explained: Best Practices and Examples</title>
</head>
Why it works:
- It says what the page is about right away.
- It includes the concept name people might search for.
- It promises examples, which is a common expectation.
2) A course or lesson page with a consistent format
<head>
<title>CSS Selectors Basics | Lesson | Mimo</title>
</head>
Why it works:
- It’s scannable.
- It keeps a predictable structure across many pages.
- Brand goes at the end, so the main topic shows first in tabs and results.
3) A product or feature page that highlights the main value
<head>
<title>Build a Portfolio Website Faster with Templates | Mimo</title>
</head>
Why it works:
- It tells the user what they can do on the page.
- It uses a clear benefit, not vague marketing language.
- It stays readable even if truncated in a browser tab.
4) A documentation page with a precise label
<head>
<title>Array.prototype.map() in JavaScript: Syntax and Examples</title>
</head>
Why it works:
- It names the exact API.
- It hints at what you’ll find on the page.
- Developers can recognize it instantly in a tab list.
Learn More About the Title Tag
Title tag vs. main page heading (H1)
A common mix-up: the <title> element is not the same thing as your on-page headline.
<title>appears in the browser tab and often in search results.<h1>appears in the page content.
They can be similar, and often they should be, but they don’t have to match exactly. For example, your H1 can be more conversational, while the title tag can be more search-focused.
<head>
<title>Python List Comprehensions: Syntax, Tips, and Examples</title>
</head>
<body>
<h1>List comprehensions without the headache</h1>
</body>
Both describe the same page, just with a different “job.”
How long should a title be?
There’s no strict character limit in HTML, but long titles get cut off in browser tabs and search results. Many teams aim for something that stays readable when truncated.
A practical approach:
- Put the most important words first.
- Remove filler like “Welcome to” or “Official website of.”
- Use separators (like
|or ) sparingly.
Example of a tight, readable title:
<title>HTML Forms Guide | Examples, Validation, and Accessibility</title>
Example of a title that’s trying too hard:
<title>Welcome to the Most Incredible and Comprehensive Guide to HTML Forms You Will Ever Read in Your Entire Life</title>
Funny once, painful forever.
Do you need a different title on every page?
Yes, in almost all cases. If multiple pages share the same title, search engines and users have a harder time telling them apart.
If you run a site with many similar pages (like lessons, glossary entries, or docs), you can use a template to keep things consistent while still being specific:
Topic: Syntax, Usage, and Examples | BrandLesson Name | Unit | BrandFeature Name | Product Name
Avoid titles like:
- “Untitled”
- “New Page”
- “Home”
- “Page 1”
Those are basically the sweatpants of titles.
What happens if you forget the title tag?
Browsers will still render the page, but the tab label can become the URL or a blank label, depending on the browser. Search engines may pick another snippet of text as the headline, which can lead to weird results.
Skipping the <title> element is like sending a package with no label. It might still arrive, but nobody enjoys the process.
Can a page have more than one <title> tag?
HTML expects a single title element per document. If you add more than one, browsers and crawlers may ignore one of them, or pick the first, or behave inconsistently.
Stick to one:
<head>
<title>One Clear Title</title>
</head>
How the title tag works with templates and JavaScript apps
Modern apps often generate the title tag dynamically, especially in single-page applications (SPAs). The key idea stays the same: the browser tab title comes from the document title.
In plain HTML, you set it with <title>. In JavaScript, you can update it like this:
document.title ="New Title for This View";
That said, server-rendered titles (or properly configured rendering) matter a lot for SEO, because search engines may not always wait for client-side code to run.
Helpful patterns for writing better titles
A few patterns that tend to work well:
1) Topic + purpose
Title Tag: Best Practices and ExamplesPython Dictionaries: Methods and Common Patterns
2) Action + outcome
Learn Flexbox Faster with Visual ExamplesDebug JavaScript Errors with Console Techniques
3) Topic + brand
SQL JOINs Explained | Mimo
Try to avoid keyword stuffing.
Title tag and accessibility
The title tag helps accessibility in a quiet but important way. Screen readers often announce the page title when a page loads, and the title is used in browser history and tab switching. A clear title helps users understand where they are, especially when multiple pages are open.
A good mental check:
If someone only heard your title out loud, would they know what the page is?
Common mistakes to avoid
-
Putting
<title>in the body<body> <title>Wrong place</title> </body>
That’s invalid and can lead to unpredictable results.
-
Leaving placeholder titles
<title>Document</title> -
Writing titles that don’t match the page
A clickbait title might get a click, then lose trust fast.
- Repeating the same title across many pages
It blurs your content together in search results and bookmarks
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot