HTML - Global title Attribute

For various elements including links, photos, and interactive elements, the title global attribute in HTML acts as a metadata property. When users hover over an element or use screen readers, it adds additional information about the element.

By providing clear explanations or tooltips, this attribute is beneficial for accessibility and improving the user experience. It helps improve accessibility and clarity for all users and can be used by web developers to provide helpful context or explanations for things on a webpage.

Syntax

Following is the syntax of the title attribute −

<element title="define title here" >

Example

In the following example, let’s see the working of title attributes in an HTML document, as follows −

<!DOCTYPE html>
<html>
<body>
   <h2>Example of title attribute</h2>
   <h1>tutorialspoint</h1>
   <p title="Free tutorials & articles">tutorialspoint.com</p>
</body>
</html>

On running the above code, the output window will pop up displaying the text on the webpage.

Example

Considering, the following example where we are going to use the title attribute with the iframe.

<!DOCTYPE html>
<html>
<body>
   <p>Use the <code>title</code> attribute on an <code>iframe</code> to clearly identify the content of the <code>iframe</code> to screen readers. </p>
   <iframe title="Wikipedia page for the HTML language" src="https://en.m.wikipedia.org/wiki/HTML"></iframe>
   <iframe title="Wikipedia page for the CSS language" src="https://en.m.wikipedia.org/wiki/CSS"></iframe>
</body>
</html>

When we run the above code, it will generate an output consisting of the text displayed on the webpage.

Example

Let's look at the following example, where we are going to use the multiline titles

<!DOCTYPE html>
<html>
<body>
   <p> Newlines in <code>title</code> should be taken into account. This <span title="This is a
multiline title"> example span </span> has a title a attribute with a newline. </p>
   <hr/>
   <pre id="output"></pre>
</body>
</html>

On running the above code, the output window will pop up displaying the text on the webpage.

Example

In the following scenario, we are going to observe the inheritance of the title attribute.

<!DOCTYPE html>
<html>
<body>
   <div title="CoolTip">
      <p>Hovering here will show "CoolTip".</p>
      <p title="">Hovering here will show nothing.</p>
   </div>
</body>
</html>

When we run the above code, it will generate an output consisting of the text displayed on the webpage.

html_attributes_reference.htm
Advertisements