How to create a custom attribute in HTML?

Create a custom attribute

To create a custom attribute in HTML, you can use the data-* attribute.

The * in the attribute name indicates that the attribute name is a placeholder for any name you choose.

For example, if you want to create a custom attribute called data-info, you can use it like this:

<div data-info="some information">This element has a custom attribute called data-info</div>

You can also use the data-* attribute to store data that is private to your application and is not meant to be displayed to the user.

Here’s an example of how you can use the data-* attribute to store private data:

<div data-id="12345">This element has a custom attribute called data-id</div>

You can access the value of a data-* attribute using JavaScript.

Here’s an example of how you can access the value of the data-info attribute using the getAttribute method:

const element = document.querySelector('div');
const info = element.getAttribute('data-info');

To create several custom attributes in HTML, you can use the data-* attribute as many times as you need.

For example, if you want to create three custom attributes called data-info, data-id, and data-type, you can use them like this:

<div data-info="some information" data-id="12345" data-type="text">This element has three custom attributes</div>

You can also use the data-* attribute to store data that is private to your application and is not meant to be displayed to the user.

Here’s an example of how you can use the data-* attribute to store private data for several attributes:

<div data-info="some information" data-id="12345" data-type="text">This element has three custom attributes</div>

You can access the value of a data-* attribute using JavaScript.

Here’s an example of how you can access the value of the data-info attribute using the getAttribute method:

element = document.querySelector('div');
const info = element.getAttribute('data-info');

I hope this helps! Let me know if you have any questions.