Data Attributes, template and Other Global Attributes

Global attributes are attributes you can put on any HTML element. In this lesson you will learn data attributes, the <template> element, and useful global attributes like hidden, contenteditable, spellcheck, translate and inert.

What are data attributes (data-*)?

Sometimes you want to store extra information on an element for your CSS or JavaScript to use: a product ID, a price, a category. HTML lets you create your own attributes for this, as long as they start with data-. These are called data attributes. The name after data- is up to you, but use lowercase letters and hyphens.

<ul class="product-list">
  <li data-product-id="1042" data-price="24.99" data-category="shoes" data-in-stock="true">
    Running shoes – €24.99
    <button type="button" class="add-btn">Add to cart</button>
  </li>
  <li data-product-id="2210" data-price="12.50" data-category="socks" data-in-stock="false">
    Sport socks – €12.50
    <button type="button" class="add-btn" disabled>Sold out</button>
  </li>
</ul>

Visitors only see the product names, prices and buttons. The data attributes are invisible, but JavaScript can read them easily. For example element.dataset.productId gives "1042" (notice that product-id becomes productId). CSS can use them in selectors too, like [data-in-stock="false"].

Common mistake: Storing private things in data attributes, like a discount code or a user's password. Anyone can see them with "View page source". Data attributes are for harmless information only.

The template element: HTML you can reuse

The <template> element holds a piece of HTML that the browser does not show and does not run. Images inside do not load and scripts do not execute. It is like a cookie cutter: it does nothing alone, but JavaScript can use it to make as many copies as needed. This is useful for things like comment lists or product cards that come from a server.

<h2>Latest comments</h2>
<ul id="comments"></ul>

<template id="comment-template">
  <li class="comment">
    <strong class="comment-author"></strong>
    <p class="comment-text"></p>
  </li>
</template>

<script>
  const template = document.getElementById("comment-template");
  const copy = template.content.cloneNode(true);
  copy.querySelector(".comment-author").textContent = "Aisha";
  copy.querySelector(".comment-text").textContent = "Great tutorial, thank you!";
  document.getElementById("comments").append(copy);
</script>

When the page opens, you see one comment by Aisha. The original template stays hidden. The script copies the template's content, fills in the text, and adds the copy to the list. You will learn JavaScript properly later. For now, remember that <template> is where reusable HTML waits until code needs it.

Useful global attributes: hidden, contenteditable, spellcheck and translate

These attributes work on almost any element:

Attribute	What it does	Example use
hidden	Hides the element completely, for everyone, including screen readers	A message that appears after an action
contenteditable	Lets the user edit the text directly on the page	A simple note or a title users can rename
spellcheck	Turns the red spelling underline on (true) or off (false)	Turn off for code, usernames or product codes
translate	translate="no" tells translation tools not to translate this text	Brand names, code
title	Shows a small tooltip on mouse hover	Extra info only, never the only place for important text
dir	Text direction: ltr, rtl or auto	Arabic or Hebrew content

<p id="saved-msg" hidden>Your note has been saved.</p>

<h2>My notes</h2>
<div contenteditable="true" aria-label="Note text">Buy milk, call Grandma, finish the HTML course.</div>

<label for="username">Username</label>
<input id="username" type="text" spellcheck="false" autocomplete="username">

<p>Download <span translate="no">CodeCraft</span> on your phone.</p>

The saved message is hidden until JavaScript removes hidden. You can click the note and type in it like a text editor (the changes are lost on reload unless JavaScript saves them). The username field shows no red underlines. If someone translates the page into Spanish, the brand name "CodeCraft" stays the same.

Note: You can also use contenteditable="plaintext-only". It allows editing but blocks bold text and other formatting when the user pastes content.

The inert attribute

The inert attribute makes a whole part of the page "asleep". Users cannot click it, Tab into it, or select its text, and screen readers skip it. Use it when content is visible but should not be usable right now, for example the page behind a custom slide-out menu, or a form section that is not active yet.

<main inert>
  <h1>Checkout</h1>
  <p>Please close the cookie banner to continue.</p>
</main>

Tip: <dialog> opened with showModal() already makes the rest of the page inert for you. You only need inert for custom components.

Recap: id vs class

You have used these from the start, but here is the rule in one place. An id must be unique on the page. Use it for links to a section (href="#pricing"), for <label for>, for ARIA attributes like aria-labelledby, and for popovertarget. A class can be used on many elements, and one element can have several classes, like class="card card-featured". Use classes for styling with CSS.

Practice exercise

Build a list of three recipes. Give each <li> data attributes for data-time (minutes) and data-difficulty. Add a contenteditable "My shopping list" box with spell check turned on, and a hidden paragraph that says "List saved".

Hint: Data attribute names should be lowercase with hyphens, like data-cook-time.

Key takeaways

• data-* attributes store extra, non-secret information for CSS and JavaScript.
• <template> holds HTML that is not shown until JavaScript copies it.
• hidden, contenteditable, spellcheck, translate and dir work on almost any element.
• inert makes part of the page unusable for mouse, keyboard and screen readers.
• id is unique on a page, while class can be reused on many elements.