How to use Custom Attributes in HTML

In HTML you can create custom attributes. You can then use CSS to style, or JavaScript to control the behavior of those attributes.

You can call your custom attributes what you want, however, custom attribute names have to be preceded by a data- label:

<tag data-custom-attribute-name="value">Content</tag>

For example, let’s say we have a food element called “Apple”. When a user clicks on it, we want to display what type of food it is in a popup dialog box.

To do that we’ll create a custom attribute called food-type (remember the data- label) and add it to a <div> element with the Apple text inside:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

And the JavaScript that makes the feature work:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

Here’s a demo.

How the HTML code works:

• First, we added an onclick attribute to the <div> element. This is an event attribute that attaches an event listener that listens for... you guessed it, clicks!
• Then we assign an attribute value of showDetailsBox(this) to the onclick attribute.
• showDetailsBox() is the name of the JavaScript function that gets called as soon as you click on the Apple text element.
• The this part of (this) is an argument that refers to the object it belongs to (this is a bit advanced for beginners, it’s okay if don’t understand it).
• id is a built-in HTML attribute used to specify a unique id for HTML elements. In this case, our unique id is apple.

How the JavaScript code works is beyond the scope of this HTML tutorial, so I’ll give you a simplified explanation:

When the showDetailsBox() function is called by the onclick event attribute, it executes its code block { ... } contents:

function showDetailsBox(food) {
  ...
}

On the first line inside the code block, JavaScript selects any HTML element with the custom data-food-type attribute, and assigns it (and its attribute value) to a variable called foodType:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

On the second line we run the built-in alert() method (that prompts the popup dialog box and tell it to display the value of foodType which is of course, fruit:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

Don’t worry if you don’t completely understand the entire code example above, there’s a lot to digest, especially for a beginner. With practice, it will make sense!

For more extensive information about HTML attributes, I recommend digging through MDN web docs HTML attribute reference.