- 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 - <dfn> Tag
The HTML <dfn> tag stands for "definition". The <dfn> tag is used to indicate the term being defined within the context of a definition phrase or sentence.
If a term is contained within the <dfn> element, then the browser understands that the text is the definition of the term.This <dfn> tag takes the title attribute, which specifies the definition of the term, and it shows when the mouse hovers over it.
The term being defined is identified following these rules −
- The same as the <dfn> tag's content. In addition, with the title attribute added:
- If the <dfn> contains a single child element and does not have any text content of its own, then add an <abbr> tag inside the <dfn> tag.
- Alternatively, with the id attribute added. Then, whenever a term is used, an <a> tag can be used to refer back to the definition −
Syntax
Following is the syntax of <dfn> tag −
<dfn title=".."> .... </dfn>
Example
In the following example, we are creating an HTML document and using the <dfn> tag without title attributes, as follows −
<!DOCTYPE html> <html> <body> <p> <dfn>tutorialspoint</dfn> is the EdTech company that provides good courses and technical tutorials for every technologies. </p> </body> </html>
When we run the above code, it will generate an output consisting of the text displayed on the webpage.
Example
Considering the following example, we are creating an HTML document and using the <dfn> tag with title attributes, as follows −
<!DOCTYPE html> <html> <body> <p> <dfn title="ReactJs">ReactJs</dfn> is the library of the JavaScript language!. </p> </body> </html>
On running the above code, the output window will pop up displaying the dfn tag text on the webpage. when the user tries to hover over the text it displays it title.
Example
Let's look at the following example, we are creating an HTML document and using <abbr> tag inside the <dfn> tag.
<!DOCTYPE html> <html> <body> <p> <dfn> <abbr title="Hypertext Markup Language">HTML</abbr> </dfn> is the standard markup language for creating web pages. </p> </body> </html>
When we run the above code, it will generate an output consisting of the text displayed on the webpage.
Example
Following is the example, where we are going to add the id attribute of the <dfn> tag so that whenever a word is used, it may be linked to the definition using an <a> tag −
<!DOCTYPE html> <html> <body> <p> The <strong>HTML Definition element ( <dfn id="definition-dfn"> <dfn></dfn>) </strong> is used to indicate the term being defined within the context of a definition phrase or sentence. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete. Scrupulum, inquam, abeunti; </p> <p> Because of all of that, we decided to use the <code> <a href="#definition-dfn"> <dfn> </a> </code> element for this project. </p> </body> </html>
On running the above code, the output window will pop up displaying the text on the webpage.