- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- 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 Color Names & Values
- HTML - Color Names
- 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 Picker
- HTML References
- HTML - Cheat Sheet
- 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 - title Attribute
HTML title attribute is used to provide additional information about an element, usually displayed as a tooltip when the user hovers over 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
<element title="text">
This attribute accept text as values.
Applies on
Since style is a global attribute in HTML, all the non structural tags supports title attribute. Some exceptions are <html>, <head>, <title> etc as they are structural elements.
Example of HTML title Attribute
Below examples will illustrate the HTML title attribute, where and how we should use this attribute!
Define title for a paragraph
In the following example, let’s see the working of title attributes in an HTML document. In the output when you hover over the paragraph tag, the title is displayed.
<!DOCTYPE html> <html> <body> <h3>Example of title Attribute</h3> <p title="HTML title Attribute Description"> HTML title attribute is used to provide additional information about an element, usually displayed as a tooltip when the user hovers over the element. </p> </body> </html>
Title for iframe Element
Considering, the following example where we are going to use the title attribute with the iframe.
<!DOCTYPE html> <html> <body> <h3>Example of title Attribute</h3> <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. If you hove over the top edge of the frame you will the value of title attribute value </p> <iframe title="Wikipedia page for the HTML language" src="https://en.m.wikipedia.org/wiki/HTML"> </iframe> </body> </html>
Inheritance of title attribute
In the following scenario, we are going to observe the inheritance of the title attribute. Parent tags title can be inherited to child tag if no title mentioned for title tag.
<!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>
Supported Browsers
Attribute | |||||
---|---|---|---|---|---|
title | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google