The HTML Data tag is used to set the current content with the machine-readable format by translating it. This tag provides both machine-readable value for data processors, and human-readable value for rendering in the browser. The data tag is the new sectioning element in HTML 5.
This tag can be useful in cases where your data needs to be in a certain format because it may be processed by a script, but this might not be the format that you’d like your users to see.
Tips : If the content is date or time related content , then you can use the element instead of the element.
Estimated reading time: 4 minutes
Syntax:
This tag contains both the opening data tag and closing data tag. The content is written between these two tags.
<data value=" "> Write your text here </data>
HTML data Tag:
| HTML tag | Used to add a machine-readable translation of a given content |
| Content categories | Flow content, phrasing content, palpable content. |
| Permitted content | Phrasing content. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | HTML DataElement |
Sample of HTML data Tag:
<!DOCTYPE html>
<html>
<head>
<title>
Title of the Document
</title>
</head>
<body>
<h2>Example for HTML Data Tag</h2>
<p>Subjects Name:</p>
<ul>
<li>
<data value="1000">Maths</data>
</li>
<li>
<data value="1003">Science</data>
</li>
<li>
<data value="1009">English</data>
</li>
<li>
<data value="1030">Physics</data>
</li>
<li>
<data value="1045">Chemistry</data>
</li>
</ul>
</body>
</html>
Result:
Download Sample File:
Attributes:
The data tag supports the global attributes and the event attributes.
| Attribute | Value | Description |
|---|---|---|
| value | machine-readable format | This attribute will set the machine-readable version of the contents which is placed inside the tag |
Styling Methods for data Tag:
You can use the following properties to style an HTML data tag.
Properties to style the visual weight/emphasis/size of the text in data tag:
- CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- CSS font-size – This CSS property will help to set the size of the font.
- CSS font-weight – This CSS property used to define whether the font should be bold or thick.
- CSS text-transform – This CSS property will control the text case and capitalization.
- CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.
Styles to coloring the text in Tag:
- CSS color – This CSS property will specify the color of the text content and decorations.
- CSS background-color – This CSS property helps to set the background color of an element.
Text layout styles for data Tag:
- CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
- *CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- CSS white-space – This CSS property describes how white-space inside an element is handled.
- CSS word-break – This CSS property decides where the lines should be broken.
Other Properties for data Tag:
- CSS text-shadow – This CSS property helps to add the shadow to text.
- CSS text-align-last – This CSS property will set the alignment of the last line of the text.
- CSS line-height – This CSS property defines the height of a line.
- CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
- CSS word-spacing – This CSS property specifies the spacing between every word.
Browser Support:
Related Articles:
The post HTML Data Tag appeared first on Share Point Anchor.
Top comments (0)