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.
Related Posts
HTML Headings: The h1 Tag for Main Titles
HTML <h1> Tag The <h1> tag represents the most important heading on a webpage, typically used for the main title...
HTML Body Tag: Structuring the Content of Your Webpage
HTML <body> Tag The <body> tag in HTML defines the main content of an HTML document. It serves as a...
HTML Page Titles: The Definitive Guide for SEO and User Experience
Introduction Ever noticed the text displayed in your browser tab? That's the work of the HTML <title> tag, and it's...
HTML Head: Defining Document Metadata
HTML <head> Tag The <head> tag in HTML serves as a container for metadata. Metadata is essentially "data about data"...
HTML DOM Title Object: Accessing Title Elements
HTML DOM Title Object: Accessing and Manipulating Title Elements The HTML DOM Title object provides a way to access and...
HTML title Attribute: Comprehensive Guide
HTML title Attribute: A Comprehensive Guide The HTML title attribute provides advisory information about the element it belongs to. Often...
HTML title Property: Element Title
HTML title Property: Enhancing User Experience with Element Titles The HTML title property provides advisory information about an element, commonly...
HTML Inserted Text: The ins Tag
HTML <ins> Tag The HTML <ins> tag is used to denote text that has been inserted into a document. It's...
HTML Address Tag: Defining Contact Information
HTML <address> Tag The <address> tag in HTML is used to provide contact information for the author or owner of...
HTML Definition Tag: The <dfn> Tag Explained
HTML <dfn> Tag The <dfn> tag in HTML is used to mark a term that is being defined within the...
HTML Cite Tag: Defining Citations and References
HTML <cite> Tag The HTML <cite> tag is used to define the title of a creative work (e.g., a book,...
HTML Root Element: The `<html>` Tag
HTML <html> Tag The <html> tag is the root element of an HTML document. It signifies the beginning and end...
