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 (
http://shoplocal.com
)
.
Listing 11-5.
HTML5 Data Attribute Example
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div data-name="product" data-url="
http://www.productURL.com
"
></div>
</body>
<script>
var element = document.getElementsByTagName('div')[0];
var name = element.dataset.name = "product"
var url = element.dataset.url = "
http://www.productURL.com
"
console.log('name' + name, 'url' + url)
</script>
</head>
</html>
■
Note
For more information about
shopLocal.com
'
s retail api, visit
http://aboutshoplocal.com/products/
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
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
<!DOCTYPE HTML>
<html lang=en>
<head>
