What is custom attribute

Table Contents

1. Introduction to Custom Attributes
2. Difference Between Data-Prefixed and Non-Prefixed Custom Attributes
3. Syntax for Data Attributes
4. Accessing and Modifying Data Attribute Values

Recently for some reason I had to use data attribute in my project, then I have wondered can I give a custom attribute to html tag without ‘data- ‘ as prefix then I did some digging online it took some time for me to find relevant details, in this post first lets go through what are custom attribute how we use then and some details regarding its syntax and also why we are not use custom attributes directly without ‘data- ‘ prefix, so lets start

Introduction to Custom Attributes

I am sure you know what are attributes in HTML tags like id, class, onClick etc these are predefined attributes for the HTML tags, if there is some data that we want to store on HTML without linking to a Javascript property then we use data attributes to be honest there is some other uses of data attributes instead of just storing content in HTML we can also use this as a CSS selector, this just some normal overview of what is data attribute

Difference Between Data-Prefixed and Non-Prefixed Custom Attributes

well on outside there is not much difference except for the prefix but inside the HTML DOM there is significant difference, so when we use ‘data-’ as prefix HTML knows we are using data attributes and it stores all the attributes which are prefixed with ‘data-’ in a particular property in its DOM known as ‘dataSet’, but when we don’t use the prefix it doesn’t know that they are custom attributes, this might lead to some validation and compatibility issues with different browsers so we are generally recommended to use ‘data-’ prefix

Syntax for Data attributes

syntax for data attributes is simple we will write the name of custom attribute with ‘data-’ as prefix

<article
    id='history'
    data-type='history'
    data-period='19th century'
    data-index-number=20
></article>

Any type of value you assign to data attribute it will always treat that data attribute as string when we try to access that in Javascript

Accessing and Modifying Data Attribute Values

I am sure you remember that in DOM object all the data attributes are stored in dataset property we can access these data attributes in ‘dataset‘ property

const element = document.getElementById('history')
//or you can use 
// const element = document.querySelector("#history")

element.dataset.type; // "history"
element.dataset.period; // "19th century"
element.dataset.indexNumber; // "20" // this is string

I hope you have saw how I accessed a data attribute ‘index-number’ we are accessing it in ‘dataset’ using ‘indexNumber‘

all the names of data attributes after ‘data-’ are divided by - if there is any in the name and are converted into camelCased

small question from my side what will happen if I have a data attribute which is data-Number, how to do you think we have to access that Number in dataset please let me know in comments

same way as we get the data attributes value we can set them

element.dataset.type='science'

there is also another way get and set the data attribute which is using getAttribute and setAttribute

element.getAttribute('index')

element.setAttribute('index','20')

I hope this blogs give you clarity on data attributes and if you have any comments you can ask in comments

sources:

1. MDN DOCS
2. ChatGPT,BingAI

Summary:

• Custom attributes in HTML, known as data attributes, allow storing additional information on HTML elements without linking to JavaScript properties.
• It's recommended to prefix custom attributes with 'data-' to ensure proper recognition and handling within the HTML DOM, this will resolve any potential issues which are raised by browsers
• Data attributes follow a simple syntax where the custom attribute name is prefixed with 'data-'.
• Don’t forget regarding the camelCase
• Accessing and modifying data attribute values can be done using the 'dataset' property or via getAttribute and setAttribute methods.