- 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 - <data> Tag
HTML <data> tag is used to link the given piece of content with the machine-readable translation.
This element provides both a machine-readable value, and a human-readable value for rendering in a browser. If the given piece of content is related to date or time, then the <time> element must be used.Using its value attribute, we can use it to specify a machine-readable translation of the element's content.
Syntax
<data>.....</data>
Attribute
HTML data tag supports Global and accept a specific attribute as well which is listed below.
Attribute | Value | Description |
---|---|---|
value | machine-readable format | Specify the machine-readable translation of the content of the element. |
Examples of HTML data Tag
Bellow examples will illustrate the usage of data tag. Where, when and how to use data tag to add a machine-readable translation of a given content.
Implementing data Element
The following HTML example shows the usage of the <data> tag in an HTML.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML data Tag</title> </head> <body> <!--create a data element--> <p>Example of HTML 'data' element</p> <p> <data>Text inside the p tag.</data> </p> </body> </html>
Using value attribute on Data Element
Consider the following example, where we are going to use the <data> tag with the value attribute and with the list.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML data tag</title> </head> <body> <!--create a data element--> <p>Example of HTML 'data' element</p> <p>Fruits: </p> <ul> <li> <data value="101">Apple</data> </li> <li> <data value="102">Banana</data> </li> <li> <data value="103">Orange</data> </li> <li> <data value="104">Grapes</data> </li> </ul> </body> </html>
Styling data Element
Let's look into the another scenario, where we are going to apply the CSS properties to the <data> tag
<!DOCTYPE html> <html lang="en"> <head> <title>HTML data tag</title> <style> data { color: red; font-style: italic; width: 120px; height: 30px; background-color: aquamarine; } </style> </head> <body> <!--create a data element--> <p>Example of HTML 'data' element</p> <p>Frontend Technologies: </p> <ul> <li> <data value="311">HTML</data> </li> <li> <data value="312">CSS</data> </li> <li> <data value="313">JavaScript</data> </li> <li> <data value="314">Angular</data> </li> <li> <data value="315">React</data> </li> </ul> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
data | Yes 62.0 | Yes 13.0 | Yes 22.0 | No | Yes 49.0 |
To Continue Learning Please Login
Login with Google