HTML Attributes

Introduction

HTML attributes are extra properties on elements—written as name="value" pairs in the opening tag. They connect your markup to CSS (class), JavaScript (data-*), accessibility (alt), and browser behavior (href, required).

This hub explains attribute syntax, groups them by purpose, links to individual guides for every attribute in our reference, and walks through six hands-on examples you can edit live.

What You’ll Learn

What Are HTML Attributes?

An HTML attribute modifies an element’s behavior, appearance hook, or metadata. Attributes live only in the opening tag (or the single tag of void elements) as name=value pairs separated by spaces.

Elements come from HTML tags; attributes refine them:

<a href="/about" class="nav-link" target="_blank">About us</a>

Here href sets the link URL, class hooks CSS, and target opens a new tab. The tag name (a) says “this is a link”; attributes say “where it goes and how it behaves.”

Attribute Syntax

Quoted values

Most attribute values are wrapped in double or single quotes. HTML5 allows unquoted values in some cases, but quoting is always safer:

<input type="text" name="email" placeholder="you@example.com">
<p title='Use either "double" or \'single\' quotes'>Hover me</p>

Boolean attributes

Boolean attributes are “on” when present and “off” when absent. Do not write ="false":

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

All of these are valid: checked, checked="", and checked="checked".

Unquoted values (invalid in practice)

Unquoted attributes break when values contain spaces. Always quote:

Multiple class names

The class attribute accepts several space-separated tokens. Order does not matter; all apply:

<button class="btn btn-primary is-loading" type="submit">Save</button>

Global vs Element-Specific Attributes

Global attributes work on nearly every HTML element—id, class, lang, dir, hidden, title, tabindex, data-*, and dozens of on* event handlers. See the dedicated global attributes guide for the full list and examples.

Element-specific attributes only apply to certain tags: href on <a>, src and alt on <img>, colspan on <td> and <th>, action and method on <form>.

Attribute Categories

Attributes are easier to learn in groups. Below is how this reference is organized.

• Global & identity — id, class, lang, dir, hidden, data-*
• Form & input — accept, action, name, type, required, placeholder
• Links & navigation — href, target, rel, download
• Media & images — src, alt, srcset, controls, poster
• Tables — colspan, rowspan, headers, scope
• Metadata — charset, content, http-equiv
• Event handlers — onclick, onchange, onsubmit, and ~70 on* globals (prefer addEventListener in production)

📝 HTML Attributes Reference

Quick lookup by category. Each attribute links to its dedicated tutorial.

Global & identity

Full coverage: HTML Global Attributes.

Form & input

Links & navigation

Media & images

Tables

Metadata

Event handlers (on*)

About 70 inline event-handler attributes exist as global attributes. Common ones:

Prefer element.addEventListener() in JavaScript instead of inline handlers for maintainability and Content Security Policy. Browse the A–Z index below for every on* attribute.

Full A–Z Attribute Index

All 210 attributes in this reference, sorted alphabetically. Click any name for the full guide.

Examples Gallery

Six examples showing common HTML attribute patterns. Each includes View Output and Try It Yourself links to the live editor.

<p class="lead">Intro paragraph with larger text.</p>
<p>Highlight a <span class="highlight">word</span> inline.</p>

<label for="username">Username</label>
<input type="text" id="username" name="username">

<img src="logo.png" alt="Site logo"
     width="120" height="60">

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>

<a href="https://example.com/docs"
   target="_blank"
   rel="noopener noreferrer">Documentation</a>

<article data-id="42" data-category="tutorial">
  <h2>HTML Attributes</h2>
  <p>Custom data attributes for scripts.</p>
</article>

💡 Best Practices