HTML and CSS Reference
In-Depth Information
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
dynamically added from a retail store web service like one from ShopLocal ( ) .
Listing 11-5. HTML5 Data Attribute Example
<div data-name="product" data-url=" " ></div>
var element = document.getElementsByTagName('div')[0];
var name = = "product"
var url = element.dataset.url = " "
console.log('name' + name, 'url' + url)
For more information about ' s retail api, visit
paperboy .
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 .
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
DOM. When you want to show the element, you can use JavaScript to remove the hidden attribute . It's pretty
straightforward; Listing 11-6 has a hidden macro value defined. After the JavaScript executes and detects that you
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
<html lang=en>
Search WWH ::

Custom Search