-
Hajipur, Bihar, 844101
HTML Page Title
The page title is one of the most important parts of your HTML document. It appears in the browser tab, helps search engines understand your page, and is used when someone bookmarks your website. Even though it looks like a small detail, it affects your site’s identity, search ranking, and user experience.
In this chapter, you will learn what the page title is, how to add it, why it matters, how search engines use it, and common mistakes developers make while writing titles.
What Is the Page Title?
The page title is the text shown in the browser tab. You write it inside the <title> tag, which belongs to the <head> section of your HTML document.
Example:
<title>My First Webpage</title>
When a user opens your website, this text appears at the top of the browser. If someone opens multiple tabs, the title helps them identify your page quickly.
Where the Page Title Appears
The page title is displayed in several locations:
-
Browser tab
-
Search engine results
-
Bookmarks
-
Social media previews (in many cases)
-
Browser history
Because of this, the title is not only a label but also a key part of how users and search engines understand your page.
Adding a Page Title in HTML
The <title> tag must always be placed inside the <head> section. Here is the simplest example:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
If you forget the <title> tag, browsers will sometimes show the file name instead. This looks unprofessional, so always add a meaningful title.
Rules for Writing a Good Page Title
A good title should be:
-
Short
-
Clear
-
Relevant
-
Easy to understand
Avoid writing long sentences. Users should understand your page within a second or two.
Example of a good title
<title>Student Registration Form</title>
Example of a bad title
<title>This is my first web page created while learning HTML basics and trying out different tags</title>
The second one is too long and confusing.
How Long Should a Page Title Be?
Most browsers and search engines display only the first 50 to 60 characters. If your title is longer, the remaining text may be cut off.
Ideal length:
45 to 60 characters
If you keep it within this range, it will display properly on most devices.
Including Keywords in the Title
If your webpage is intended for the public, adding important keywords helps search engines understand your page. This is useful when building a real website.
For example, if you are creating a page about a login form:
<title>School Login Form Design</title>
If you are creating a page for an online course:
<title>HTML Basics Tutorial for Beginners</title>
Keywords should appear naturally. Do not repeat words unnecessarily.
Using Dynamic Page Titles
When you build larger projects using PHP, Python, or other backend frameworks, you may generate titles dynamically. But even in simple HTML projects, it is good to practice writing titles that match the page content.
Example in PHP:
<title><?php echo $page_name; ?></title>
This sets the title based on the value of $page_name. Many websites use this method to manage hundreds of pages easily.
Page Title vs H1 Heading
Beginners often think the title and the first heading (H1) are the same, but they are different.
Differences:
| Feature | Page Title | H1 Heading |
|---|---|---|
| Appears in browser tab | Yes | No |
| Seen on the webpage | No | Yes |
| Used by search engines | Yes | Yes |
| Added using | <title> tag |
<h1> tag |
| Where it belongs | <head> |
<body> |
Both should describe the page, but they should not always be identical. They should be related but written naturally.
Example:
Page title:
<title>HTML Forms Tutorial</title>
H1 heading on the page:
<h1>Introduction to HTML Forms</h1>
This gives clarity to both users and search engines.
Why Page Titles Matter
Even though the <title> tag looks simple, it plays a big role in how your website is viewed and understood.
1. Usability
Users can quickly identify which tab belongs to your site.
2. Branding
A consistent title setup helps your site look organized.
3. SEO
Search engines use the title to understand the topic of your page.
4. Sharing
When someone shares your page on messaging apps or social media, the title is usually picked up automatically.
5. Bookmarking
Your saved page will appear with the same title in bookmarks, making it easy to find later.
Including Your Brand Name in the Title
Many websites include their brand name in the title for better recognition.
Pattern used by many developers:
<title>Page Topic | Brand Name</title>
Example:
<title>Contact Us | Sunrise School</title>
This pattern works well because it keeps the main topic first and the brand second.
Writing Page Titles for Multiple Pages
Every page on your website should have a unique title. If two pages share the same title, it becomes difficult for search engines and users to differentiate between them.
For example, you may use:
-
Home | My School
-
Courses | My School
-
Admission Form | My School
-
Contact | My School
Each page is unique but consistent.
Common Mistakes to Avoid
Here are mistakes beginners often make:
1. Using the same title for every page
This creates confusion and looks unprofessional.
2. Leaving the title empty
Some browsers will display “Untitled Page.”
3. Writing extremely long titles
Search engines may cut them off.
4. Stuffing keywords
Repeating keywords looks spammy and harms ranking.
5. Using special characters unnecessarily
Symbols like “***///” don't help and look odd.
Example: Complete HTML Page Showing Page Title
<!DOCTYPE html>
<html>
<head>
<title>Student Profile Page</title>
</head>
<body>
<h1>Student Profile</h1>
<p>Details about the student appear here.</p>
</body>
</html>
This is the correct and clean way to define a title.
When the Browser Does Not Update the Title
Sometimes you update the <title> tag, but the browser still shows the old text. This usually happens because of caching.
Solutions:
-
Hard refresh (Ctrl + F5)
-
Open the page in an incognito window
-
Clear browser cache
-
Rename the file temporarily
-
Restart the browser
Once the cache clears, the new title appears correctly.
Summary of HTML Page Title
The <title> tag defines the page title and appears in browser tabs, search results, bookmarks, and social media previews. It should be short, clear, and related to the page content. The title must be placed inside the <head> section, ideally between 45 and 60 characters. Each page on your website should have a unique title. Good titles improve usability, branding, search ranking, and user trust.
Practice Questions
Q1. Create an HTML page and give it the title “Welcome Page”.
Q2. Write the correct code to display “Contact Us” as the page title.
Q3. Place the <title> tag inside the <head> section.
Q4. Create a title for a portfolio page: “John Doe – Web Developer”.
Q5. Use JavaScript to change the title after 3 seconds.
Q6. Write a title for an HTML tutorial page.
Q7. Make sure your HTML file shows “Home - MySite” in the browser tab.
Q8. Add different titles for two different HTML pages.
Q9. Write a short and SEO-friendly title for a travel website.
Q10. Bookmark your test page and verify the title appears correctly.
