- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
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.
To Continue Learning Please Login
Login with Google