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.
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.
Example of sample code
<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>
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 store and save SEO web analytics data
We can fetch and update custom data attributes using getAttribute and setAttribute methods as follows:
<div id=’banana-plant’ data-fruit=’10’></div>
// 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
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.