Learn HTML attributes with a complete reference list, explanations, usage, global attributes, events, forms, media, and best practices for developers.
HTML Attribute Reference – Complete & Easy Guide
HTML attributes are special words written inside HTML tags. They give extra information about an element or control how that element behaves. Without attributes, HTML would be very limited and static.
This detailed guide explains what HTML attributes are, how they work, and provides a complete reference of attributes, including global attributes, form attributes, media attributes, and event attributes.
What Is an HTML Attribute?
An HTML attribute modifies or adds meaning to an HTML element.
Basic Syntax
<tag attribute="value">Content</tag>
Example
<img src="photo.jpg" alt="A beautiful sunset">
src→ tells the browser where the image isalt→ provides alternative text if the image cannot load
Types of HTML Attributes
HTML attributes can be grouped into logical categories:
- Global Attributes – Can be used on almost all HTML elements
- Element-Specific Attributes – Work only with certain tags
- Form Attributes – Used with form elements
- Media Attributes – Used with audio and video
- Event Attributes – Trigger JavaScript actions
Global Attributes (Work on Almost All Elements)
Global attributes improve accessibility, interaction, and styling.
| Attribute | Description |
|---|---|
id | Unique identifier for an element |
class | Assigns one or more CSS classes |
style | Adds inline CSS |
title | Extra information on hover |
lang | Language of content |
dir | Text direction (ltr / rtl) |
hidden | Hides the element |
contenteditable | Makes content editable |
tabindex | Controls keyboard navigation |
spellcheck | Enables/disables spelling check |
translate | Controls auto-translation |
draggable | Makes element draggable |
inert | Makes content inactive |
data-* | Stores custom data |
popover | Defines a popover UI |
accesskey | Keyboard shortcut |
inputmode | Virtual keyboard type |
enterkeyhint | Label for enter key |
Form-Related Attributes
Used to control form submission, validation, and user input.
| Attribute | Belongs To | Purpose |
|---|---|---|
action | <form> | URL to send form data |
method | <form> | HTTP method (GET/POST) |
enctype | <form> | Encoding type |
autocomplete | <form>, <input> | Enables auto-fill |
novalidate | <form> | Skips validation |
required | <input>, <select> | Mandatory field |
readonly | <input>, <textarea> | Read-only input |
disabled | Form controls | Disables element |
placeholder | <input>, <textarea> | Hint text |
pattern | <input> | Regex validation |
maxlength | <input>, <textarea> | Character limit |
min, max, step | Inputs | Numeric limits |
multiple | <input>, <select> | Multiple values |
checked | <input> | Pre-selected checkbox |
selected | <option> | Pre-selected option |
list | <input> | Connects <datalist> |
dirname | Inputs | Submits text direction |
Media Attributes (Audio & Video)
Control playback behavior of media elements.
| Attribute | Description |
|---|---|
src | Media source URL |
controls | Shows play/pause buttons |
autoplay | Plays automatically |
loop | Repeats media |
muted | Mutes sound |
preload | Loads media in advance |
poster | Preview image for video |
kind | Track type (subtitles, captions) |
srclang | Language of subtitles |
default | Default track |
Image & Resource Attributes
Used with images, links, and external resources.
| Attribute | Used With | Purpose |
|---|---|---|
src | Images, media | File URL |
alt | Images | Alternative text |
width, height | Media | Dimensions |
srcset | Images | Responsive images |
sizes | Images | Image size rules |
usemap | Images | Image maps |
ismap | Images | Server-side maps |
href | Links | Destination URL |
target | Links, forms | Open behavior |
download | Links | Force download |
rel | Links | Relationship |
hreflang | Links | Language of target |
media | Links, styles | Media conditions |
Table & List Attributes
Used for structured data and lists.
| Attribute | Element | Description |
|---|---|---|
colspan | <td>, <th> | Column span |
rowspan | <td>, <th> | Row span |
headers | Table cells | Header association |
scope | <th> | Header scope |
span | <col>, <colgroup> | Column span |
start | <ol> | Starting number |
reversed | <ol> | Descending order |
value | <li> | List item value |
Event Attributes (JavaScript Events)
Event attributes execute JavaScript when something happens.
Mouse Events
onclickondblclickonmouseoveronmouseoutonmousemoveonmousedownonmouseuponwheel
Keyboard Events
onkeydownonkeypressonkeyup
Form Events
onchangeoninputonsubmitonresetoninvalidonselect
Media Events
onplayonpauseonendedonvolumechangeontimeupdateonwaitingonprogress
Window & Document Events
onloadonresizeonscrollonofflineononlineonunloadonpagehideonpageshowonpopstateonhashchangeonstorage
Deprecated Attributes (Avoid in HTML5)
These attributes are not supported in HTML5 and should be replaced with CSS.
| Attribute | Reason |
|---|---|
align | Use CSS alignment |
bgcolor | Use CSS background |
border | Use CSS border |
color | Use CSS color |
big | Use CSS font-size |
acronym | Use <abbr> |
Best Practices for Using HTML Attributes
- ✅ Use semantic attributes for clarity
- ✅ Prefer CSS over deprecated attributes
- ✅ Always include
altfor images - ✅ Use
labelwithforfor accessibility - ❌ Avoid inline event handlers when possible
Final Thoughts
HTML attributes are the building blocks of interactive, accessible, and responsive web pages. Understanding which attribute belongs to which element helps you write clean, valid, and modern HTML.
This reference serves as a complete, beginner-friendly, and professional guide to all major HTML attributes used in real-world web development.