HTML and CSS Reference
and Variables” section, you can plug these undefined macro values in your HTML without affecting your valid
markup. The data attribute is a great way to add dynamic values to your markup without hacking them to the DOM
through scripts. Listing 11-5 showcases how to use the custom data attribute in your ad if you were to have products
Listing 11-5. HTML5 Data Attribute Example
var element = document.getElementsByTagName('div');
var name = element.dataset.name = "product"
console.log('name' + name, 'url' + url)
The data attribute works simply by using data-* , where * stands for whatever value you want. In this case,
you use NAME and URL as they relate to product information that could be dynamically populated within your ad
based on the response from the Shoplocal API. Just to reiterate, this can be any name you want! Go nuts—it's all
still valid HTML!
What's really great about using the data attribute is that with all the attributes you add, you can display the
information instantaneously to the user without having to worry about making any additional external requests or
having to make any server-side queries. Since the data is baked into the markup, it is already present. This speeds
up performance tremendously because the data is already present in the DOM. You do not need to “request more
information” since the information is already there with the initial response. For more detailed information about the
custom data attribute in HTML5, visit http://html5doctor.com/html5-custom-data-attributes .
Another really useful attribute new in HTML5 is called hidden . When using the hidden attribute, the browser
should not render the element; however, the element is still visible in the markup and accessible from the
have your value replaced by the ad server, you can render the element and its value to the screen for the user to
display. This is really helpful in scenarios where you need to request the data before presenting it to a user.
Listing 11-6. HTML5 hidden Attribute Example