~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/html/8html-attributes

# HTML Attributes

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

## Basic Syntax

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

<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:

```html
<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):

```html
<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):

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

### `title`

Adds a tooltip on hover:

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

### `lang`

Specifies the language of content:

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

### `dir`

Sets text direction:

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

### `tabindex`

Controls tab order for keyboard navigation:

```html
<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:

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

### `accesskey`

Creates a keyboard shortcut:

```html
<input accesskey="s" /> 
<a accesskey="h" href="/home">Home</a>
```

### `contenteditable`

Makes content editable by the user:

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

### `draggable`

Enables drag-and-drop:

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

## Custom Data Attributes

The `data-*` attribute stores custom data:

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

**Access with JavaScript:**

```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:**

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

## ARIA Attributes

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

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

<div role="navigation" aria-label="Main menu">
  
</div>
```

## Boolean Attributes

Attributes that are either present or absent:

```html

<input disabled />
<input disabled="disabled" />

<button disabled>Can't click</button>
<input required />
<audio autoplay />
<script async></script>
```

## Complete Example

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

```html
<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

```javascript
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

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

## Common Mistakes

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

No changes yet

cancel