QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Storing Meta Data In HTML Tags Using data-* Attributes

Storing Meta Data In HTML Tags Using data-* Attributes

data-attribute

Sometimes we store meta data in HTML tags in form of classes or custom attributes. But that’s a bad way of storing meta data. Because you as the developer of the website known’s that its meta data but other developer will not be able to identify meta data by look at the attribute or classes. So HTML5 provides a way to store meta data in HTML tags known as data attributes.


Ways of storing meta data

<!-- Here we are storing meta data in class -->
<a href="http://qnimate.com" class="blog-name-qnimate">QNimate</a>

<!-- Here we are storing meta data in custom attributes -->
<a href="http://qnimate.com" blog-name="qnimate">QNimate</a>

<!-- Here we are storing meta data in HTML data attributes -->
<a href="http://qnimate.com" data-blog-name="qnimate">QNimate</a>

We can see that data-* attributes are formed in same way as any other custom attribute. data-* attributes can be used the same way as any other attribute.

Using data-* attributes in HTML4 and lower

In HTML4 attributes come in key/value pairs. You must assign a value to a attribute otherwise it becomes invalid. But in HTML5 if we don’t provide value to an attribute then the value becomes a empty string.

As data-* attributes are formed the same way as any other custom attribute you can use data-* attributes in HTML4. But make sure you assign a value to it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>QNimate</title>
    </head>
    <body>
        <!-- This is invalid in HTML4 -->
        <p data-blog-name-qnimate>QNimate</p>

        <!-- This is valid in HTML4 -->
        <p data-blog-name="qnimate">QNimate</a>    
    </body>
</html>

data-* attribute is just a readable way of storing meta data.

Using data-* for styling

We can use data-* for styling like we use any other attribute for styling

a[data-blog-name-qnimate]
{
   font-size: 20px;
}
/* or */
a[data-blog-name="qnimate"]
{
   font-size: 20px;
}

Javascript targeting

HTML5 provides querySelector() and querySelectorAll() for getting reference of HTML tags using any attributes.

//this is for retrieving the first anchor element with attribute data-blog-name-qnimate
var object = document.querySelector("a[data-blog-name-qnimate]");
//or
var object = document.querySelector("a[data-blog-name='qnimate']");

Accessing attribute using Javascript

We can retrieve data-* attribute values using JavaScript like we do for any other attribute.

var blogName = document.getElementById("link-to-my-blog").getAttribute("data-blog-name");

Dataset

HTML5 provides a special property to HTML elements called as dataset. Its assigned to a DOMStringMap object which has properties same as the data-* attributes of the HTML element.

console.log(document.querySelector("a[data-blog-name-qnimate]").dataset);

For non HTML5 supported browser also you can use Dataset property using a Polyfill called as Dataset Shim.

More operations on dataset property:

//if data-firstname is not present then attribute is created otherwise updated.
document.getElementById("element").dataset.firstname = "narayan";

//retrieving the value
var firstname = document.getElementById("element").dataset.firstname;
//if attribute has a '-' in between, for example: data-first-name then
var firstname = document.getElementById("element").dataset.firstName;

//deleting a value
delete document.getElementById("element").dataset.firstname;


Conclusion

We can say that HTML5 introduced a readable way of storing meta data in html tags called as data-* attributes. Its used the same way as any other attribute. Only benefit is if we are using it in HTML5 then we get dataset feature.

May 5, 2014Narayan Prusty
How Does HTTP Authentication Work?Changing CSS Style using JavaScript
Comments: 0

    Leave a Reply Cancel reply

    To create code blocks or other preformatted text, indent by four spaces:

        This will be displayed in a monospaced font. The first four
        spaces will be stripped off, but all other whitespace
        will be preserved.
        
        Markdown is turned off in code blocks:
         [This is not a link](http://example.com)
    

    To create not a block, but an inline code span, use backticks:

    Here is some inline `code`.

    For more help see http://daringfireball.net/projects/markdown/syntax

    Narayan Prusty

    I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

    Image8 years ago 1 Comment Web Development
    Share this
    0
    GooglePlus
    0
    Facebook
    0
    Twitter
    0
    Linkedin
    • Ways of storing meta data
    • Using data-* attributes in HTML4 and lower
    • Using data-* for styling
    • Javascript targeting
    • Accessing attribute using Javascript
    • Dataset
    Related Articles
    • How to Store Arrays in HTML5 localStorage
    • How to Store Objects in HTML5 localStorage
    • Storing Key Value Pairs in CSV using PHP
    • JavaScript ArrayBuffers And Typed Arrays
    • Managing HTML Element Classes Using classList API
    Our Sponsor
    My Books

    2014 - 2015 © QNimate
    All tutorials MIT license