HTML <title> Tag
The <title> tag in HTML defines the title of a web page. This title is displayed in the browser's title bar, tab, and search engine results. It is an essential part of HTML documents because it provides context for users and is crucial for search engine optimization (SEO). It lives inside the <head> tag.
Syntax
<title>Your Page Title</title>
Attributes
The <title> tag does not have any specific attributes. It solely uses text content to define the title of the document.
| Attribute | Value | Description |
|---|---|---|
| None | N/A | The title tag does not accept any attributes |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
In this example, the title "My First Web Page" will appear in the browser tab or title bar.
More Examples
Example 1: A Blog Post Title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Ultimate Guide to HTML Tags - CodeLucky Blog</title>
</head>
<body>
<article>
<h1>The Ultimate Guide to HTML Tags</h1>
<p>Learn the most important HTML tags and how to use them effectively...</p>
</article>
</body>
</html>
This example demonstrates how a blog post might use a title to indicate its content and brand.
Example 2: An E-Commerce Product Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome T-Shirt - Buy Online | Example Store</title>
</head>
<body>
<section>
<h2>Awesome T-Shirt</h2>
<p>Description of the product ...</p>
</section>
</body>
</html>
Here, the title includes the product name, action (buy), and the store name.
Example 3: A Contact Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us | My Business Name</title>
</head>
<body>
<main>
<h1>Contact Us</h1>
<p>Reach out with your inquiries...</p>
</main>
</body>
</html>
This example shows a clear and concise title for a contact page.
Browser Support
The <title> tag is supported by all major browsers, including:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- The
<title>tag is mandatory in all HTML documents. - Place the
<title>tag inside the<head>section of your HTML document. - Keep the title concise and descriptive. Aim for around 50-60 characters for optimal search engine display.
- Include relevant keywords for SEO purposes, but avoid keyword stuffing.
- Make the title unique for each page of your website. This helps search engines understand the context of each page.
- The title should accurately represent the content of the page to improve user experience.
- For best SEO practices start with the most important keyword, then add your Brand at the end like: 'Best HTML Tutorials – CodeLucky.com'.
- Be consistent with your brand naming to avoid confusions.
- The title tag helps in sharing in social media like: Facebook, Twitter.
