Syllabus

HTML Attributes (Global & Standard)

Badar KhalilUpdated September 27, 2026 2 min read

HTML Attributes (Global & Standard)

HTML attributes provide additional information about an element and control its behavior, styling, or accessibility. Attributes are always specified inside the opening tag and typically follow a name="value" pattern.

Basic Attribute Syntax

Code

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

Example:

Code

<a href="https://www.example.com" target="_blank">Visit Site</a>

Here, href and target are both attributes of the <a> element.

Global Attributes

Global attributes can be applied to almost any HTML element, regardless of its type. These are essential for styling, scripting, and accessibility:

class — assigns one or more CSS class names
id — assigns a unique identifier
style — applies inline CSS
title — adds a tooltip on hover
lang — specifies the language of the content
hidden — hides the element from view
tabindex — controls keyboard focus order
contenteditable — allows users to edit content directly in the browser
draggable — enables drag-and-drop functionality

Standard (Element-Specific) Attributes

Unlike global attributes, standard attributes only work on specific elements:

href — used only on <a> and <link>
src — used on <img>, <script>, <video>, <iframe>
alt — used on <img> for accessibility and SEO
type — used on <input>, <button>, <script>
placeholder — used on form fields like <input> and <textarea>

Custom data-* attributes let you store extra information directly on HTML elements, which is heavily used in modern JavaScript frameworks and vanilla JS DOM manipulation:

Code

<button data-user-id="482" data-role="admin">Edit User</button>

Code

// Accessing data attributes in JavaScript
const btn = document.querySelector('button');
console.log(btn.dataset.userId); // "482"
console.log(btn.dataset.role);   // "admin"

ARIA Attributes for Accessibility

As web accessibility (a11y) becomes a legal and ethical priority in 2026, ARIA attributes are increasingly essential:

Code

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

Boolean Attributes

Some attributes don't need a value at all — their mere presence enables the behavior:

Code

<input type="text" disabled>
<input type="checkbox" checked>
<video controls autoplay muted></video>

Best Practices for Writing Attributes

Always use double quotes around attribute values for consistency.
Never skip the alt attribute on images — it's critical for SEO and screen readers.
Use data-* attributes instead of storing custom data in class names.
Combine class and id thoughtfully: class for reusable styles, id for unique JS hooks.

Key Takeaways

Attributes add extra information or behavior to HTML elements.
Global attributes work on almost any element; standard attributes are element-specific.
data-* attributes are widely used for JavaScript interactivity.
ARIA attributes are essential for building accessible, modern websites.

Try it Yourself HTML

<a href='https://www.w3schools.com' target='_blank' title='Visit W3Schools'>Learn More</a>
<img src='logo.png' alt='Company Logo' width='150'>
<input type='email' placeholder='Enter your email' required>

Output

Press Run to execute.

Try it Yourself HTML

<button id='editBtn' data-user-id='482' data-role='admin'>Edit User</button>

<script>
  const btn = document.getElementById('editBtn');
  btn.addEventListener('click', function() {
    console.log('User ID:', btn.dataset.userId);
    console.log('Role:', btn.dataset.role);
  });
</script>

Output

Press Run to execute.

Exercise: Add Attributes to Make This Page AccessibleHTML

Add an alt attribute to the image, a data-id attribute to the button, and an aria-label attribute to the close icon.

Try it Yourself HTML

<img src='product.jpg'>
<button>Add to Cart</button>
<span>X</span>

Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?