available in these cities:
- Amsterdam
- London
- Paris
- Rome
- Berlin
- New York
- Houston
- Los Angeles
A data-* attribute on an <aside> tag attaches additional data to the aside element.
To create a custom attribute, replace * with a lowercase string, such as data-id, data-status, or data-location.
A custom data-phone attribute on an <aside> element.
The attribute value is not visible, but is readable by JavaScript.
<div style="display:flex;">
<main>
Art appreciation classes are<br />
available in these cities:
<ul>
<li>Amsterdam</li>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
<li>Berlin</li>
<li>New York</li>
<li>Houston</li>
<li>Los Angeles</li>
</ul>
</main>
<aside data-phone="+31 020-765-4321"
style="padding:80px;" >
<i>For the cheapest flights<br />
please contact our travel<br />
partner KLM.</i>
</aside>
</div>
The data-* attribute adds custom information to an <aside> element.
The * part is replaced with a lowercase string, such as data-id, data-status, or data-location.
An <aside> element can have any number of data-* attributes, each with their own name.
Using data-* attributes reduces the need for requests to the server.
Note: The data-* attribute is not visible and does not change the appearance of the aside.
<aside data-*="value">
Note: The * can be any string, such as data-id, data-cost, data-supplier, etc.
| Value | Description |
|---|---|
| value | A string value. Can be numeric, alphanumeric, JSON, etc. |
A custom data-contact attribute on an <aside> element. This attribute assigns a phone number to make reservations.
Clicking the button displays this number.
<div style="display:flex;">
<main>
Art appreciation classes are<br />
available in these cities:
<ul>
<li>Amsterdam</li>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
<li>Berlin</li>
<li>New York</li>
<li>Houston</li>
<li>Los Angeles</li>
</ul>
</main>
<aside data-contact="tel: +31 20 765 4321"
id="myaside" style="margin:80px;" >
<i>For the cheapest flights<br />
please contact our travel<br />
partner KLM.</i>
</aside>
</div>
<br/>
<button onclick="show();">Show data</button>
<script>
let show = () => {
let element = document.getElementById("myaside");
alert("Contact info = " + element.getAttribute('data-contact'));
}
</script>
The <aside> tag is assigned a data-contact attribute.
The data-contact attribute specifies a phone number to call for reservations.
Button clicks are handled by the onclick event.
Onclick invokes a JavaScript function that extracts and displays the contact info.
Note: The contact information displays very quickly without server call.
Here is when data-* support started for each browser:
 Chrome
|
6.0 | Sep 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
11.1 | Mar 2011 |
 Safari
|
5.0 | Jun 2010 |
Back to <aside>
