HTML Attributes - Complete Reference

📋 HTML Attributes Overview

What are HTML Attributes?

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

Attribute Syntax

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

<!-- Examples -->
<img src="image.jpg" alt="Description" width="300" height="200">
<a href="https://example.com" target="_blank">Link</a>
<input type="text" name="username" required>
                

Attribute Categories

Global Attributes: Can be used with any HTML element
Element-Specific Attributes: Only work with specific elements
Boolean Attributes: Don't require a value (true when present)
Data Attributes: Custom attributes starting with "data-"
Event Handler Attributes: Handle user interactions

🌐 Global Attributes

Core Global Attributes

Attribute	Description	Example
id	Unique identifier for an element	<div id="header">
class	CSS class name(s) for styling	<p class="highlight important">
style	Inline CSS styling	<h1 style="color: blue;">
title	Tooltip text displayed on hover	<img title="Photo description">
lang	Language of the content	<html lang="en">
dir	Text direction (ltr, rtl)	<p dir="rtl">

id

Provides a unique identifier for an element. Must be unique within the document.

<div id="main-content">
<h1 id="page-title">Title</h1>
                    

class

Specifies one or more CSS class names. Multiple classes separated by spaces.

<p class="highlight important">
<div class="container sidebar">
                    

style

Inline CSS styling. Should be avoided in favor of external stylesheets.

<h1 style="color: blue; font-size: 24px;">
<div style="background: yellow;">
                    

title

Provides additional information about an element. Shown as tooltip on hover.

<img src="photo.jpg" title="Beautiful sunset">
<abbr title="HyperText Markup Language">HTML</abbr>
                    

♿ Accessibility Attributes

Accessibility Attributes Reference

Attribute	Description	Example
alt	Alternative text for images	<img alt="Description">
aria-label	Accessible label for screen readers	<button aria-label="Close">×</button>
aria-describedby	References element that describes this one	<input aria-describedby="help-text">
role	Defines the role of an element	<div role="button">
tabindex	Controls tab order	<div tabindex="0">

                ♿ Accessibility Best Practices:
                Always provide alt text for images
Use semantic HTML elements when possible
Ensure proper heading hierarchy
Provide labels for form inputs
Use ARIA attributes when needed
Test with screen readers

            

📊 Data Attributes

Custom Data Attributes

Data attributes allow you to store extra information on HTML elements. They start with "data-" and can be accessed via JavaScript.

<!-- Data Attributes Examples -->
<div data-user-id="123" data-role="admin">User Info</div>
<button data-action="save" data-target="form1">Save</button>
<article data-category="technology" data-published="2025-10-01">
    Article content
</article>

<!-- CSS Access -->
[data-role="admin"] { background-color: red; }

<!-- JavaScript Access -->
element.dataset.userId; // "123"
element.dataset.role;   // "admin"
                

Data Attribute Rules

Must start with "data-"
Can contain hyphens and lowercase letters
Values are always strings
Accessible via element.dataset property
Hyphens become camelCase in JavaScript

🎯 Element-Specific Attributes

Image Attributes

Attributes specific to <img> elements.

<img src="image.jpg" 
     alt="Description" 
     width="300" 
     height="200" 
     loading="lazy">
                    

Link Attributes

Attributes specific to <a> elements.

<a href="https://example.com" 
   target="_blank" 
   rel="noopener" 
   download="file.pdf">Link</a>
                    

Form Attributes

Attributes for form elements.

<form action="submit.php" 
      method="POST" 
      enctype="multipart/form-data">

<input type="email" 
       name="email" 
       required 
       placeholder="Enter email">
                    

Table Attributes

Attributes for table elements.

<table border="1" cellpadding="10" cellspacing="0">
<td colspan="2" rowspan="3">Cell</td>
                    

✅ Boolean Attributes

Boolean Attributes Reference

Boolean attributes don't require a value. They are true when present and false when absent.

Attribute	Elements	Purpose
checked	<input type="checkbox">, <input type="radio">	Pre-selects the input
disabled	<input>, <button>, <select>	Disables the element
readonly	<input>, <textarea>	Makes element read-only
required	<input>, <select>, <textarea>	Makes field required
selected	<option>	Pre-selects the option
autoplay	<audio>, <video>	Starts playing automatically

<!-- Boolean Attributes Examples -->
<input type="checkbox" checked>
<input type="text" required>
<button disabled>Disabled Button</button>
<textarea readonly>Read-only text</textarea>
<option selected>Default Option</option>
            

⚡ Event Handler Attributes

Common Event Handlers

Attribute	Event	Description
onclick	click	Mouse click
onload	load	Element loaded
onchange	change	Value changed
onsubmit	submit	Form submitted
onmouseover	mouseover	Mouse enters element
onfocus	focus	Element receives focus

<!-- Event Handler Examples -->
<button onclick="alert('Hello!')">Click Me</button>
<img src="image.jpg" onload="console.log('Image loaded')">
<input onchange="validateInput(this)">
<form onsubmit="return confirm('Submit?')">
<div onmouseover="this.style.background='yellow'">Hover me</div>
            

⚠️ Event Handler Best Practices:

Prefer JavaScript event listeners over inline handlers
Keep inline handlers simple for quick prototypes
Consider accessibility when using event handlers
Test event handlers across different browsers

✅ Attribute Best Practices

HTML5 Attribute Guidelines

Quote Values: Always use quotes around attribute values
Lowercase Names: Use lowercase for attribute names
Meaningful Names: Choose descriptive attribute names
Avoid Deprecated: Don't use deprecated attributes
Validate HTML: Always validate your HTML

✅ Good Attribute Usage:
<!-- Good: Proper quotes and meaningful names -->
<img src="profile.jpg" alt="User profile picture" class="avatar">
<a href="https://example.com" title="Visit our website">Link</a>
<input type="email" name="user-email" required placeholder="Enter email">
                

❌ Avoid These Mistakes:

<!-- Bad: No quotes, uppercase, meaningless names -->
<img src=profile.jpg alt=photo class=img1>
<a HREF=https://example.com TITLE=link>Link</a>
<input type=email name=x required placeholder=email>
                

⚙️ HTML Attributes

Complete Reference of HTML Attributes