How to magically create your own attribute in HTML5?

Image for post
Image for post
Photo by Julius Drost on Unsplash

We use so many attributes such as id, class, title, etc. But we can create our attribute in HTML by the “data-” attribute. I will introduce you with *data-* attribute.

What is Data Attribute?

“It is used to store your data(Custom data) in HTML Element which will be hidden from the user but visible to the developer.

Do I need to use this attribute?

Yeah. I am explaining why. Most of the time you will use it when you need to add extra information on an HTML element so that you can access/filter/delete/style the element. But you should use this only when there is no other appropriate HTML element available

How can I use this attribute?

The attribute must be prefixed with “data-” and minimum one character after it. It can contain hyphen(-),dot(.),colon(:),letter,number and underscore(_).But you can’t use uppercase letters.

Practical application(Style CSS)

We can use data attribute to style elements. Suppose There is five list items of Schools. Among them 2 schools are in USA and 3 schools are in INDIA. We want to give yellow background to those school situated in “USA” and pink Background to those schools of “INDIA”. Let’s see how can we do this:

HTML File:

<ul><li data-school="INDIA">Mumbai School of Arts</li><li data-school="INDIA">Delhi schooll and College</li><li data-school="USA">Washington Dc school of liberal Arts</li><li data-school="USA">Colorado Labour school</li><li data-school="INDIA">Kolkata zilla school</li></ul>

CSS File

ul li[data-school="USA"] {background-color: yellow;
}
ul li[data-school="INDIA"] {background-color: pink;}

Now see in the browser. You will watch different background color for different country.

How to access data attribute from JavaScript?

Its very simple. Suppose you write a paragraph about workers in your factory and you don’t want to disclose the number of employees. You can use the data attribute to hide the number and access it. I am showing two ways of accessing it. First, create the paragraph:

<p id=”worker” data-employee=50;>There are thousads of workers are working in our factory</p>

Look at the code. I gave 50 as data-employee which menas my factory has 50 workers .Lets see first way to access this:

JS file:

let paragraph=document.getElementById("worker");let numOfWOrker=paragraph.getAttribute("data-employee");console.log(numOfWOrker) //50

We can access this by another method(Dataset Method)

In this method use this procedure.

Element.dataset.key

Lets use this method to the previous “p” element.

let paragraph=document.getElementById("worker");let numOfWOrker= paragraph.dataset.employee;console.log(numOfWOrker)

We can the upadate the data by dataset object.
paragraph.dataset.employee=80 will change the attribute value to 80. Try this yourself.
This is the introduction of the HTML5 data attribute. There are more things you can do with the data attribute. I will write about this in the future. Follow me for future posts

Written by

Front-End Developer & Tech Writer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store