HTML Attributes

Difficulty: Beginner

HTML attributes provide additional information about elements. They are always specified in the opening tag and usually come in name-value pairs like name="value". Attributes modify the behavior, appearance, or meaning of an element without changing its visible content. For example, an <a> tag without an href attribute is just styled text, but with href it becomes a clickable link.

Global attributes are attributes that can be used on any HTML element. The most commonly used global attributes are: id (a unique identifier for the element - must be unique within the entire page), class (one or more class names for CSS styling and JavaScript selection - multiple elements can share the same class), style (inline CSS styles applied directly to the element), title (tooltip text shown when the user hovers over the element), lang (specifies the language of the element's content), dir (text direction: ltr or rtl), and tabindex (controls keyboard tab navigation order).

Boolean attributes are special attributes that do not need a value. Their mere presence on an element is enough to activate the behavior. Common boolean attributes include disabled (disables form inputs), checked (pre-checks checkboxes and radio buttons), required (makes form fields mandatory), readonly (prevents editing), hidden (hides an element), and autoplay (auto-plays audio/video). In HTML5, you can write them as just the attribute name: <input disabled> is equivalent to <input disabled="disabled">.

Data attributes (data-*) allow you to store custom data on any HTML element. They are prefixed with data- followed by your chosen name, like data-user-id="42" or data-category="electronics". In JavaScript, you can access these values through the element's dataset property: element.dataset.userId returns '42'. Data attributes are useful for passing information from HTML to JavaScript without using non-standard attributes or hidden input fields.

The id and class attributes deserve special attention because they are used constantly in CSS and JavaScript. An id must be unique on the page - no two elements should share the same id. It is used for fragment navigation (href="#section1"), JavaScript targeting (document.getElementById), and CSS styling (#myId). Classes, on the other hand, can be shared across multiple elements and an element can have multiple classes separated by spaces: class="card featured large". Classes are the primary mechanism for applying CSS styles and are selected with a dot prefix in CSS (.card).

Code examples

Common Global Attributes

<!-- id: unique identifier -->
<div id="main-content">
  <h1>Welcome</h1>
</div>

<!-- class: for CSS styling (can have multiple) -->
<p class="text-large text-blue">Styled paragraph</p>

<!-- style: inline CSS (use sparingly) -->
<p style="color: red; font-size: 18px;">Red text</p>

<!-- title: tooltip on hover -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- lang: language of content -->
<p lang="fr">Bonjour le monde</p>

<!-- tabindex: keyboard navigation order -->
<button tabindex="1">First in tab order</button>
<button tabindex="2">Second in tab order</button>

Global attributes work on any HTML element. id must be unique per page. class can be shared and an element can have multiple space-separated classes. title provides a hover tooltip.

Boolean Attributes

<!-- Boolean attributes are true by their presence alone -->

<!-- Disabled input: user cannot type in it -->
<input type="text" disabled placeholder="Cannot edit this">

<!-- Pre-checked checkbox -->
<input type="checkbox" checked> I agree to the terms

<!-- Required field: form won't submit without it -->
<input type="email" required placeholder="Email is required">

<!-- Hidden element: not displayed -->
<p hidden>This text is hidden from view</p>

<!-- All of these are equivalent for boolean attributes: -->
<input disabled>
<input disabled="">
<input disabled="disabled">

Boolean attributes do not need a value. Simply including the attribute name activates the behavior. Writing disabled, disabled="", or disabled="disabled" all have the same effect.

Data Attributes

<!-- Store custom data on elements -->
<div id="user-card"
     data-user-id="42"
     data-role="admin"
     data-last-login="2026-03-10">
  <h3>Jane Doe</h3>
  <p>Administrator</p>
</div>

<ul>
  <li data-price="29.99" data-category="books">HTML Guide</li>
  <li data-price="49.99" data-category="courses">CSS Course</li>
</ul>

<!-- Accessed in JavaScript via dataset:
  const card = document.getElementById('user-card');
  console.log(card.dataset.userId);    // "42"
  console.log(card.dataset.role);      // "admin"
  console.log(card.dataset.lastLogin); // "2026-03-10"
-->

Data attributes use the data- prefix and can store any custom information. In JavaScript, access them via element.dataset - note that hyphenated names become camelCase (data-user-id becomes dataset.userId).

Key points

The id attribute must be unique within the entire HTML document. Duplicate IDs can cause JavaScript bugs and accessibility issues.
Use class for styling and grouping elements. Use id for unique identification and JavaScript targeting.
Inline styles (style attribute) should be avoided in favor of CSS classes. They are hard to maintain and override.
Data attributes provide a standard way to embed custom data. They are always strings - convert to numbers with parseInt() or parseFloat() in JavaScript.

Concepts covered

Global Attributes, id, class, style, title, Boolean Attributes, data Attributes, Custom Attributes