HTML Attributes

HTML attributes provide additional information about elements, controlling their behavior, appearance, and functionality. Attributes are always specified in the opening tag and come in name-value pairs.

Attribute Syntax

Attributes are written as name="value" pairs in the opening tag of an element, separated from the element name and other attributes by spaces. The attribute name specifies what kind of information you're providing, and the value specifies the specific information.

Attribute values should be enclosed in double quotes, although single quotes are also valid. While HTML5 allows unquoted values in some cases, always using quotes is the safest and most consistent practice.

Element names and attribute names are case-insensitive in HTML, but attribute values may be case-sensitive depending on the attribute. For consistency and best practice, use lowercase for attribute names.

<!-- Basic attribute syntax -->
<element attribute="value">Content</element>

<!-- Multiple attributes -->
<img src="photo.jpg" alt="Description" width="600" height="400">

<!-- Different quote styles (all valid) -->
<div class="container">Double quotes (recommended)</div>
<div class='container'>Single quotes (valid)</div>
<div class=container>Unquoted (valid in HTML5, but avoid)</div>

Global Attributes

Global attributes can be used on any HTML element. The most commonly used global attributes are class (assigns CSS classes), id (provides a unique identifier), style (inline CSS), title (tooltip text), and lang (language of content).

Other important global attributes include: data-* (custom data attributes for JavaScript), hidden (hides the element), tabindex (controls tab order for keyboard navigation), contenteditable (makes content editable), and dir (text direction).

ARIA attributes (aria-*) are global attributes that improve accessibility by providing additional information to screen readers. Examples include aria-label, aria-describedby, and aria-hidden.

<!-- Common global attributes -->
<div class="container featured" id="main-container">
  <p lang="en" title="Hover for tooltip">English text</p>
  <p lang="es">Spanish text</p>
</div>

<!-- Data attributes for JavaScript -->
<button 
  data-user-id="12345" 
  data-action="delete"
  data-confirm="Are you sure?">Delete</button>

<!-- Accessibility attributes -->
<button aria-label="Close dialog" aria-pressed="false">
  <span aria-hidden="true">&times;</span>
</button>

<!-- Other global attributes -->
<div contenteditable="true" spellcheck="true" dir="ltr">
  Editable content
</div>

The class Attribute

The class attribute assigns one or more class names to an element, which can be used as selectors in CSS and JavaScript. Multiple classes are separated by spaces. Class names should be descriptive, lowercase, and use hyphens for multiple words.

Unlike the id attribute, the same class can be used on multiple elements. This makes classes ideal for styling groups of elements or selecting multiple elements with JavaScript.

Class naming conventions: Use meaningful names that describe the purpose or appearance (e.g., 'button-primary', 'alert-danger'), avoid presentational names (e.g., 'red-text', 'big-font'), and consider using methodologies like BEM (Block Element Modifier) for larger projects.

<!-- Single class -->
<div class="container">Content</div>

<!-- Multiple classes -->
<button class="btn btn-primary btn-large">Click Me</button>

<!-- Descriptive class names -->
<div class="user-card featured active">
  <h3 class="user-card-title">John Doe</h3>
  <p class="user-card-description">Developer</p>
</div>

<!-- BEM methodology -->
<div class="card card--featured">
  <h3 class="card__title">Title</h3>
  <p class="card__content">Content</p>
</div>

The id Attribute

The id attribute provides a unique identifier for an element. No two elements in the same document should have the same id. IDs are used for CSS styling (with #id selector), JavaScript element selection (getElementById), and creating anchor links.

ID values must be unique within the page, start with a letter (a-z or A-Z), and can contain letters, digits, hyphens, and underscores. Avoid spaces and special characters.

While you can use ids for styling, it's generally better to use classes for CSS and reserve ids for JavaScript hooks and page anchors. IDs have very high specificity in CSS, which can make styles harder to override.

<!-- Unique identifiers -->
<header id="main-header">Header</header>
<nav id="main-navigation">Navigation</nav>
<main id="content">Main content</main>

<!-- IDs as anchor targets -->
<h2 id="section-1">Section 1</h2>
<p>Content for section 1...</p>

<h2 id="section-2">Section 2</h2>
<p>Content for section 2...</p>

<!-- Links to page sections -->
<a href="#section-1">Jump to Section 1</a>
<a href="#section-2">Jump to Section 2</a>

<!-- JavaScript selection -->
<button id="submit-button" onclick="handleSubmit()">Submit</button>

Boolean Attributes

Boolean attributes represent true/false values. If the attribute is present, the value is true; if absent, it's false. The value itself doesn't matter—disabled, disabled="", and disabled="disabled" all have the same effect.

Common boolean attributes include: disabled (disables form controls), checked (checks checkboxes/radio buttons), readonly (makes inputs read-only), required (makes inputs required), multiple (allows multiple selections), selected (selects option elements), and hidden (hides elements).

For maximum compatibility and clarity, you can write boolean attributes in three ways: attribute-only (disabled), empty string (disabled=""), or attribute name as value (disabled="disabled"). All are equivalent in HTML5.

<!-- Boolean attributes in forms -->
<input type="text" name="username" required disabled>
<input type="checkbox" name="subscribe" checked>
<input type="text" name="email" readonly>
<select name="options" multiple>
  <option>Option 1</option>
  <option selected>Option 2</option>
</select>

<!-- Hidden elements -->
<div hidden>
  This content is hidden from view
</div>

<!-- Different boolean attribute styles (all equivalent) -->
<button disabled>Disabled Button</button>
<button disabled="">Disabled Button</button>
<button disabled="disabled">Disabled Button</button>

Common Element-Specific Attributes

  • <a> - href (link destination), target (_blank, _self), rel (relationship)
  • <img> - src (image source), alt (alternative text), width, height, loading (lazy)
  • <input> - type (text, email, password, etc.), name, value, placeholder, required
  • <form> - action (submission URL), method (GET or POST), enctype (encoding type)
  • <link> - href (file location), rel (relationship), type (MIME type)
  • <script> - src (script location), async, defer, type (module, text/javascript)
  • <meta> - charset (character encoding), name, content, property
  • <table> - border, cellpadding, cellspacing (deprecated, use CSS instead)
  • <iframe> - src (page to embed), width, height, sandbox, allow
  • <video>, <audio> - src, controls, autoplay, loop, muted, preload