Learn How to use HTML title tag

HTML: <title> tag

In this series of learning HTML, we will teach you how to use an HTML title tag with proper syntax and lots of examples. Let’s start on the HTML title tag.

Description of HTML title tag

The HTML title tag is used to define the title of an HTML document. The text within the title tag is displayed in the title bar of a web browser, and is also used by search engines to determine the title of a web page.

Here’s an example of how to use the title tag in HTML:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

In this example, the title tag defines the title of the HTML document as “My Website”. When rendered in a web browser, it might look something like this:

[My Website] - Welcome to My Website

Note that the title tag should be included within the head section of an HTML document, and should be used to provide a brief and descriptive title for the web page. A good title should accurately reflect the content of the web page, and should be concise and easy to read.

Syntax of HTML title tag

The HTML <title> tag is used to define the title of an HTML document. The syntax of the <title> tag is as follows:

<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
</head>
<body>
<!-- Document content -->
</body>
</html>

Here, the <title> tag is used to define the title of the HTML document, which will typically be displayed in the title bar of the web browser.

The <title> tag is typically included within the <head> section of an HTML document, which contains metadata about the document. The <head> section is not displayed in the web browser, and typically includes information such as the document’s author, keywords, and character encoding.

Example:

<!DOCTYPE html>
<html>
<head>
<title>My personal website</title>
<meta name="author" content="John Doe">
<meta name="keywords" content="personal, website, blog">
<meta charset="UTF-8">
</head>
<body>
<!-- Document content -->
</body>
</html>

In this example, the <title> tag is used to define the title of the website as “My personal website”. The <head> section also includes metadata about the document, such as the author, keywords, and character encoding.

Global Attributes

The title tag is an HTML global attribute that is used to define the title of a document. It is an important element for web accessibility and search engine optimization as it is displayed in the browser’s title bar and is used by search engines to index the page.

The syntax for the title tag is as follows:

<head>
<title>Page Title</title>
</head>

The text within the title tag should be descriptive and concise, and should accurately reflect the content of the page. It is recommended to keep the length of the title under 70 characters to ensure that it is fully displayed in search engine results.

In addition to being displayed in the title bar, the title tag is also used by social media platforms when sharing links. When a link is shared on social media, the title tag is often displayed as the headline or title of the shared content.

It is important to note that each web page should have a unique title tag, and that the title should accurately reflect the content of the page.

Event Attributes

There is no such thing as an “event attribute” associated with the title tag in HTML. The title tag is a global attribute used to define the title of a document and is not directly associated with any event handling in HTML.

However, the title tag can indirectly affect some events in HTML. For example, when a user hovers their cursor over a link, the title text can be displayed as a tooltip. This can be helpful in providing additional context or information about the link before the user clicks on it.

In addition, the title tag can indirectly affect the way that search engines and social media platforms display information about a page. When a page is shared on social media or displayed in search results, the title tag is often used as the title or headline of the content.

Overall, while the title tag does not have any direct event attributes in HTML, it can indirectly affect how users interact with and share content on the web.

Other Attributes

The title tag in HTML is a global attribute, meaning it can be used on any HTML element. However, there are no specific attributes associated with the title tag other than the global attributes, which can be used with any HTML element.

Global attributes that can be used with the title tag include:

class: assigns one or more CSS classes to the title tag for styling purposes.
id: assigns a unique identifier to the title tag for use with JavaScript or CSS.
style: allows for inline CSS styling to be applied to the title tag.
lang: specifies the language of the title tag content.
dir: specifies the direction of the title tag content (left-to-right or right-to-left).

It is worth noting that while these global attributes can be used with the title tag, they may not necessarily be useful or necessary in most cases. The title tag is typically used to define the title of a document or page, and the text within the tag is not typically styled or manipulated in any way.

Important notes on HTML: title tag

The title tag in HTML is an important element for several reasons:

Browser Title: The text within the title tag is displayed in the browser’s title bar and is one of the first things that users see when they navigate to a web page. It provides a brief description of the page’s content and helps users identify the page they are currently viewing.
SEO: Search engines use the text within the title tag as a key factor in determining the relevance and content of a web page. As such, it is important to ensure that the title accurately reflects the content of the page and contains relevant keywords that users may be searching for.
Social media sharing: When a web page is shared on social media platforms, the title tag is often used as the title or headline of the shared content. This makes it important to ensure that the title accurately reflects the content of the page and is attention-grabbing enough to encourage users to click on the shared link.

Some important tips to keep in mind when working with the title tag include:

Keep it concise: The title tag should be brief and to the point, ideally no more than 70 characters in length. This ensures that it is fully displayed in search engine results and does not get cut off.
Be descriptive: The title tag should accurately reflect the content of the page and provide a clear indication of what the user can expect to find on the page.
Use relevant keywords: Including relevant keywords in the title tag can help improve search engine rankings and make it easier for users to find your page.
Make it unique: Each page on your website should have a unique title tag that accurately reflects the content of the page. This helps avoid confusion and ensures that each page is properly indexed by search engines.

Browser Compatibility

The HTML title tag has essential support with the following browsers:

Chrome
Internet Explorer (IE)
Opera
Safari (WebKit)
Firefox (Gecko)
Android
Firefox Mobile (Gecko)
Edge Mobile
Opera Mobile
Safari Mobile

Examples of HTML title tag

We will discuss theHTML title tag below, with some examples of how to use the title tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

HTML5
HTML4
XHTML

HTML5 Document

Here is an example of an HTML5 document using the title tag:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Page - My Website</title>
<meta name="description" content="This is an example page on my website.">
<meta name="keywords" content="example, page, website">
<meta name="author" content="John Doe">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to my Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Example Page</h2>
<p>This is an example page on my website.</p>
</main>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>

In this example, the title tag is used to define the title of the web page, which is “Example Page – My Website”. This title accurately reflects the content of the page and provides a clear indication of what the user can expect to find on the page.

In addition to the title tag, the HTML document also includes several meta tags that provide additional information about the page, such as the page’s description, keywords, and author. These tags can be used by search engines and other applications to better understand the content of the page and improve search engine rankings.

The document also includes a stylesheet link that references an external CSS file, which is used to style the page’s content. Finally, the document includes header, main, and footer sections that contain the page’s main content and navigation links.

Overall, this HTML5 document demonstrates how the title tag can be used to provide a concise and accurate title for a web page, while other meta tags can be used to provide additional information about the page’s content.

HTML 4.01 Transitional Document

Here is an example of an HTML 4.01 Transitional document using the title tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example Page - My Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="This is an example page on my website.">
<meta name="keywords" content="example, page, website">
<meta name="author" content="John Doe">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to my Website</h1>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>Example Page</h2>
<p>This is an example page on my website.</p>
</div>
<div id="footer">
<p>© 2023 My Website. All rights reserved.</p>
</div>
</div>
</body>
</html>

The document also includes a stylesheet link that references an external CSS file, which is used to style the page’s content. The document is structured using the div element, which is used to group related content together. The id attribute is used to give each div element a unique identifier, which can be used to style the content using CSS.

Overall, this HTML 4.01 Transitional document demonstrates how the title tag can be used to provide a concise and accurate title for a web page, while other meta tags can be used to provide additional information about the page’s content. The document also demonstrates how the div element can be used to structure the page’s content, and the id attribute can be used to identify specific sections of the content.

XHTML 1.0 Transitional Document

here is an example of an XHTML 1.0 Transitional document using the title tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example Page - My Website</title>
<meta name="description" content="This is an example page on my website." />
<meta name="keywords" content="example, page, website" />
<meta name="author" content="John Doe" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to my Website</h1>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>Example Page</h2>
<p>This is an example page on my website.</p>
</div>
<div id="footer">
<p>© 2023 My Website. All rights reserved.</p>
</div>
</div>
</body>
</html>

In addition to the title tag, the XHTML document also includes several meta tags that provide additional information about the page, such as the page’s description, keywords, and author. These tags can be used by search engines and other applications to better understand the content of the page and improve search engine rankings.

Overall, this XHTML 1.0 Transitional document demonstrates how the title tag can be used to provide a concise and accurate title for a web page, while other meta tags can be used to provide additional information about the page’s content. The document also demonstrates how the div element can be used to structure the page’s content, and the id attribute can be used to identify specific sections of the content.

XHTML 1.0 Strict Document

Here’s an example of an XHTML 1.0 Strict document using the title tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example XHTML 1.0 Strict Document with Title Tag</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Example XHTML 1.0 Strict Document</h1>
<p>This is an example of an XHTML 1.0 Strict document with a <code>title</code> tag.</p>
</body>
</html>

Let’s break this down:

The first line is the document type declaration, which specifies that this is an XHTML 1.0 Strict document.
The html element is the root element of the document, and it has two attributes: xmlns and xml:lang. The xmlns attribute specifies the XML namespace for the document, and the xml:lang attribute specifies the language of the document.
The head element contains metadata about the document, such as the title and meta tags. In this example, we’re using the title tag to specify the title of the document.
The meta tag specifies the character encoding of the document. In this case, we’re using UTF-8.
The body element contains the content of the document. In this example, we’re using a h1 tag to create a heading, and a p tag to create a paragraph of text.

Overall, this document is a very basic example of an XHTML 1.0 Strict document with a title tag. The title tag is important because it provides a concise, descriptive title for the document, which can be used by search engines and other tools to help identify and categorize the content of the document.

XHTML 1.1 Document

Here’s an example of an XHTML 1.1 document using the title tag:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<title>Example XHTML 1.1 Document with Title Tag</title>
</head>
<body>
<h1>Example XHTML 1.1 Document</h1>
<p>This is an example of an XHTML 1.1 document with a <code>title</code> tag.</p>
</body>
</html>

Let’s break this down:

The first line specifies the XML declaration, which includes the version of XML being used and the character encoding of the document.
The DOCTYPE declaration specifies that this is an XHTML 1.1 document.
The html element is the root element of the document, and it has one attribute: xmlns, which specifies the XML namespace for the document.
The head element contains metadata about the document, such as the title and meta tags. In this example, we’re using the title tag to specify the title of the document.
The meta tag specifies the content type and character encoding of the document. In this case, we’re using application/xhtml+xml as the content type and UTF-8 as the character encoding.
The body element contains the content of the document. In this example, we’re using a h1 tag to create a heading, and a p tag to create a paragraph of text.

Overall, this document is a very basic example of an XHTML 1.1 document with a title tag. The title tag is important because it provides a concise, descriptive title for the document, which can be used by search engines and other tools to help identify and categorize the content of the document. Note that in XHTML 1.1, the title tag must be included within the head element, unlike in XHTML 1.0 where it can be placed outside the head element.