Attribute

HTML attributes provide additional information about HTML elements. They are always specified in the opening tag and usually come in name/value pairs like name="value".

Standard Attributes

Common Global Attributes

html
<!-- id: Unique identifier -->
<div id="header">Header content</div>

<!-- class: CSS class names -->
<p class="text-large text-bold">Important text</p>

<!-- style: Inline CSS styles -->
<span style="color: red; font-size: 16px;">Red text</span>

<!-- title: Tooltip text -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- data-*: Custom data attributes -->
<button data-user-id="123" data-action="delete">
  Delete User
</button>

Element-Specific Attributes

html
<!-- Links -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Link
</a>

<!-- Images -->
<img src="photo.jpg" alt="A beautiful sunset" width="600" height="400">

<!-- Forms -->
<input type="text" name="username" placeholder="Enter username" required>

<!-- Buttons -->
<button type="submit" disabled>Submit</button>

Data Attributes

Data attributes allow you to store custom data on HTML elements.

html
<article
  data-post-id="42"
  data-category="tutorial"
  data-author="john-doe"
>
  Article content...
</article>

Accessing Data Attributes in JavaScript

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

// Using dataset
console.log(article.dataset.postId); // "42"
console.log(article.dataset.category); // "tutorial"

// Using getAttribute
console.log(article.getAttribute('data-post-id')); // "42"

// Setting data attributes
article.dataset.views = '150';
article.setAttribute('data-likes', '25');

Using in CSS

css
/* Select elements with data attribute */
[data-category="tutorial"] {
  border-left: 4px solid blue;
}

/* Display data attribute content */
.price::after {
  content: attr(data-currency);
}

ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes improve accessibility.

html
<!-- aria-label: Accessible name -->
<button aria-label="Close dialog">
  <svg><!-- X icon --></svg>
</button>

<!-- aria-labelledby: Reference to label -->
<h2 id="dialog-title">Confirmation</h2>
<div role="dialog" aria-labelledby="dialog-title">
  Are you sure?
</div>

<!-- aria-describedby: Additional description -->
<input
  type="email"
  aria-describedby="email-hint"
  required
>
<p id="email-hint">We'll never share your email</p>

<!-- aria-hidden: Hide from screen readers -->
<span aria-hidden="true">🎉</span>

<!-- aria-live: Announce dynamic changes -->
<div aria-live="polite">
  Item added to cart
</div>

Boolean Attributes

Boolean attributes don't need a value - their presence indicates true.

html
<!-- These are equivalent -->
<input type="checkbox" checked>
<input type="checkbox" checked="">
<input type="checkbox" checked="checked">

<!-- Common boolean attributes -->
<button disabled>Click me</button>
<input type="text" required>
<input type="text" readonly>
<script src="app.js" defer></script>
<script src="app.js" async></script>
<video autoplay muted loop>

React/JSX Attributes

In React, some attribute names differ from HTML.

jsx
// className instead of class
<div className="container">Content</div>

// htmlFor instead of for
<label htmlFor="email">Email:</label>
<input id="email" type="email">

// camelCase for multi-word attributes
<div onClick={handleClick} tabIndex={0}>
  Click me
</div>

// Style as object
<div style={{ backgroundColor: 'blue', fontSize: '16px' }}>
  Styled div
</div>

// Data attributes work the same
<div data-test-id="submit-button">Submit</div>

Common Attributes Reference

Links (<a>)

  • href: URL destination
  • target: Where to open link (_blank, _self, _parent, _top)
  • rel: Relationship (noopener, noreferrer, nofollow)
  • download: Download file instead of navigating

Images (<img>)

  • src: Image source URL
  • alt: Alternative text (required for accessibility)
  • width, height: Dimensions
  • loading: Lazy loading (lazy, eager)

Forms

  • type: Input type (text, email, password, etc.)
  • name: Form field name
  • value: Field value
  • placeholder: Hint text
  • required: Field must be filled
  • disabled: Field cannot be edited
  • readonly: Field is read-only

Meta Tags

  • charset: Character encoding
  • name: Metadata name
  • content: Metadata content
  • property: Open Graph property

JavaScript Manipulation

javascript
const element = document.querySelector('.my-element');

// Get attribute
const id = element.getAttribute('id');

// Set attribute
element.setAttribute('data-status', 'active');

// Remove attribute
element.removeAttribute('disabled');

// Check if attribute exists
if (element.hasAttribute('required')) {
  // Handle required field
}

// Get all attributes
const attrs = element.attributes;
for (let attr of attrs) {
  console.log(attr.name, attr.value);
}

Best Practices

  • Use semantic HTML attributes appropriately
  • Always include alt text for images
  • Use data attributes for custom data, not made-up attributes
  • Validate attribute values (URLs, numbers, etc.)
  • Use ARIA attributes to enhance accessibility
  • Keep attribute values readable and meaningful
  • Avoid inline styles when possible

Learn More