-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
109 lines (90 loc) · 2.57 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
---
title: "<data>: The Data element"
slug: Web/HTML/Element/data
page-type: html-element
browser-compat: html.elements.data
---
{{HTMLSidebar}}
The **`<data>`** [HTML](/en-US/docs/Web/HTML) element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the {{HTMLElement("time")}} element must be used.
{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}
## Attributes
This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
- `value`
- : This attribute specifies the machine-readable translation of the content of the element.
## Examples
The following example displays product names but also associates each name with a product number.
```html
<p>New Products</p>
<ul>
<li><data value="398">Mini Ketchup</data></li>
<li><data value="399">Jumbo Ketchup</data></li>
<li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>
```
### Result
{{EmbedLiveSample('Examples')}}
## Technical summary
<table class="properties">
<tbody>
<tr>
<th scope="row">
<a href="/en-US/docs/Web/HTML/Content_categories"
>Content categories</a
>
</th>
<td>
<a href="/en-US/docs/Web/HTML/Content_categories#flow_content"
>Flow content</a
>,
<a href="/en-US/docs/Web/HTML/Content_categories#phrasing_content"
>phrasing content</a
>, palpable content.
</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td>
<a href="/en-US/docs/Web/HTML/Content_categories#phrasing_content"
>Phrasing content</a
>.
</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>None, both the starting and ending tag are mandatory.</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>
Any element that accepts
<a href="/en-US/docs/Web/HTML/Content_categories#phrasing_content"
>phrasing content</a
>.
</td>
</tr>
<tr>
<th scope="row">Implicit ARIA role</th>
<td>
<code
><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role"
>generic</a
></code
>
</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>Any</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLDataElement")}}</td>
</tr>
</tbody>
</table>
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- The HTML {{HTMLElement("time")}} element.