HTML Attributes

Attributes add extra information to HTML elements. They appear in opening tags and follow the name="value" syntax.

Basic Syntax

<tagname attribute="value">Content</tagname>

<!-- Multiple attributes -->
<img src="photo.jpg" alt="Photo" width="800" />

Global Attributes

These attributes can be used on any HTML element:

`class`

Assigns one or more class names for CSS styling and JavaScript:

<div class="container">Content here</div>
<p class="intro highlight">Styled paragraph</p>

Usage:

CSS: .container { max-width: 1200px; }
JavaScript: document.querySelector('.intro')

`id`

Assigns a unique identifier (only one per page):

<div id="main-content">Content</div>
<h2 id="section-1">Section 1</h2>

Usage:

CSS: #main-content { margin: 20px; }
JavaScript: document.getElementById('section-1')
Links: <a href="#section-1">Jump to Section 1</a>

`style`

Adds inline CSS (avoid when possible):

<p style="color: red; font-size: 16px;">Red text</p>

`title`

Adds a tooltip on hover:

<abbr title="HyperText Markup Language">HTML</abbr>

`lang`

Specifies the language of content:

<html lang="en">
<p lang="fr">Bonjour le monde!</p>

`dir`

Sets text direction:

<p dir="ltr">Left to right (default)</p>
<p dir="rtl">Right to left</p>

`tabindex`

Controls tab order for keyboard navigation:

<input tabindex="1" />
<input tabindex="2" />
<button tabindex="3">Click me</button>

Values:

0 — Natural tab order
-1 — Not focusable via tab
1+ — Focus order (avoid high numbers)

`hidden`

Hides an element completely:

<div hidden>This element is hidden</div>

`accesskey`

Creates a keyboard shortcut:

<input accesskey="s" /> <!-- Alt+S -->
<a accesskey="h" href="/home">Home</a>

`contenteditable`

Makes content editable by the user:

<div contenteditable="true">
  Click here and start typing!
</div>

`draggable`

Enables drag-and-drop:

<img src="photo.jpg" draggable="true" alt="Drag me" />

Custom Data Attributes

The data-* attribute stores custom data:

<article data-id="123" data-category="html" data-author="Alice">
  <h2>Article Title</h2>
</article>

Access with JavaScript:

const article = document.querySelector('article');

// Using dataset
console.log(article.dataset.id);        // "123"
console.log(article.dataset.category);  // "html"

// Set data
article.dataset.views = "42";

Use CSS with data attributes:

[data-category="html"] {
  border-left: 3px solid orange;
}

ARIA Attributes

For accessibility (covered in detail in Tutorial #15):

<button aria-label="Close menu" aria-expanded="false">
  ×
</button>

<div role="navigation" aria-label="Main menu">
  <!-- nav content -->
</div>

Boolean Attributes

Attributes that are either present or absent:

<!-- These are equivalent -->
<input disabled />
<input disabled="disabled" />

<!-- Common boolean attributes -->
<button disabled>Can't click</button>
<input required />
<audio autoplay />
<script async></script>

Complete Example

Here’s a real-world element with multiple attributes:

<article
  data-id="456"
  data-category="tutorial"
  data-published="2026-09-08"
  class="post"
  id="post-456"
>
  <header>
    <h2 class="post-title">
      <a href="/tutorials/html-attributes" class="post-link">
        HTML Attributes Guide
      </a>
    </h2>
    <time datetime="2026-09-08" class="post-date">September 8, 2026</time>
  </header>

  <div class="post-content">
    <p>Learn about HTML attributes...</p>
  </div>

  <footer class="post-meta">
    <span class="author" data-author-id="789">Alice</span>
    <span class="read-time" data-minutes="5">5 min read</span>
  </footer>
</article>

JavaScript Interaction

const article = document.querySelector('#post-456');

// Read data attributes
console.log(article.dataset.id);        // "456"
console.log(article.dataset.category);  // "tutorial"

// Modify class list
article.classList.add('featured');
article.classList.remove('hidden');
article.classList.toggle('expanded');

// Set attribute
article.setAttribute('aria-expanded', 'true');

// Check attribute
if (article.hasAttribute('data-pinned')) {
  // Handle pinned article
}

Best Practices

Use class for styling — Keep styles in CSS, not inline
Use id sparingly — Only when you need a unique identifier
Use data- for custom data* — Don’t invent attributes
Keep names lowercase — data-user-id, not data-userId
Use semantic attributes — alt, href, src before custom ones

Common Mistakes

Duplicate IDs — Each id must be unique on the page
Using id for styling — Use classes instead (more flexible)
Inline styles — Avoid style="" when possible
Missing alt on images — Always add alt attribute
Invalid attribute names — Use lowercase, no spaces