All about HTML5 Data Attribute

HTML (Hyper Text Markup Language) is set of tags and rules to create web pages with attractive design to be displayed on the web browser. HTML 5 is the latest and the current version of HTML. The previous version was HTML 4. HTML 5 has lot of advanced features and facilities that give your website a rich, highly interactive and excellent look and feel through its latest and sophisticated Graphical User Interface (GUI) support.

The aim of creating HTML 5 was to define a single markup language that can be written in both HTML and XHTML. HTML 5 has many special enhancements, advancements and Application Programming Interface (APIs) support for different type of web applications whether they are simple or complex.

html5

New features added in HTML 5

  • <audio> and <video> elements for playing different type of media formats
  • <canvas> element which allows you to design and draw dynamic and innovative bitmap images and 2D shapes
  • Mathematical Markup Language (MathML) to support different mathematical formulas that can perform different arithmetic, algebraic and statistical calculations

HTML 5 Data attribute

Before HTML 5, we had to use attributes such as “class” or “rel” to store small snippets or pieces of code. But these snippets can cause problem in the website functionality or design style. The new attribute has been introduced in HTML 5 called “data”.

The “data” attribute includes two parts:

1)      Attribute Name

It starts with the prefix “data-“. It must be at least one character long and should not contain any letter in upper case.

2)      Attribute Value

It can be any string value.

html5_data_attributes

Example of sample code

<ul id=”Fruits”>

<li data-spacing=”10cm” data-time=”January to March”>Banana</li>

<li data-spacing=”20cm” data-time=”April to August”>Mangoes</li>

<li data-spacing=”30cm” data-time=”September to December”>Apples</li>

</ul>

As per the above code, when the user clicks on any fruit, new view will be displayed in browser showing the spacing and data time. The data- attribute allows us to display required information and it also reduces tension to think about the database queries on server side.

Different uses of data attributes

  • To save the different parameters such as width or height of element which can be used later for various calculations involved in JavaScript
  • To store and save SEO web analytics data
  • To store and save parameters for a animated and flash based movie which is making use of JavaScript
  • Provide support to <video> elements that makes use of JavaScript

Use of data attributes with JavaScript

html5 javascript

We can fetch and update custom data attributes using getAttribute and setAttribute methods as follows:

<div id=’banana-plant’ data-fruit=’10′></div>

<script>

// Method of ‘Getting’ data-attributes with the use of getAttribute

var plant = document.getElementById(‘banana-plant’);

var fruitCount = plant.getAttribute(‘data-fruit’); // fruitCount = ’10′

//Method of ‘Setting’ data-attributes with the use of setAttribute

plant.setAttribute(‘data-fruit’,’5′);

</script>

Conclusion:

The use of custom data attributes is increasing day by day. It makes it easier and simpler to store the application data in your website pages. As websites are becoming more and more complex nowadays, the data attributes can provide excellent support and help for your data storage.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>