Quick Answer
What are HTML attributes?
HTML attributes provide additional information about HTML elements, specified in the opening tag as name/value pairs like name="value". They include global attributes (class, id, style), event attributes (onclick, onload), ARIA attributes (aria-label, role), and element-specific attributes (href, src, alt).
What are HTML Attributes?
HTML attributes provide additional information about HTML
elements. Attributes are always specified in the opening tag and
usually come in name/value pairs like
name="value".
Global Attributes
Global attributes can be used on any HTML element.
| Attribute | Description | Example |
|---|---|---|
| class |
Specifies one or more class names for an element (used for
CSS and JavaScript)
|
class="btn primary" |
| id |
Specifies a unique id for an element (must be unique
within the document)
|
id="header" |
| style |
Specifies inline CSS styles for an element
|
style="color: red;" |
| title |
Specifies extra information (displayed as tooltip on
hover)
|
title="Click here" |
| lang |
Specifies the language of the element's content
|
lang="en" |
| dir |
Specifies the text direction (ltr or rtl)
|
dir="ltr" |
| hidden |
Boolean attribute that hides an element from display
|
hidden |
| tabindex |
Specifies the tab order of an element (for keyboard
navigation)
|
tabindex="1" |
| contenteditable |
Specifies whether the content is editable
|
contenteditable="true" |
| draggable |
Specifies whether an element is draggable
|
draggable="true" |
| spellcheck |
Specifies whether to check spelling and grammar
|
spellcheck="true" |
| translate |
Specifies whether content should be translated
|
translate="no" |
| accesskey |
Specifies a keyboard shortcut to activate/focus element
|
accesskey="s" |
| data-* |
Used to store custom data private to the page or
application
|
data-user-id="123" |
Event Attributes
Event attributes specify actions to be performed when certain events occur.
| Attribute | Description | Example |
|---|---|---|
| onclick |
Script to run when element is clicked
|
onclick="myFunction()" |
| onload |
Script to run when page/element finishes loading
|
onload="init()" |
| onchange |
Script to run when element value changes
|
onchange="validate()" |
| onsubmit |
Script to run when form is submitted
|
onsubmit="return check()" |
| onmouseover |
Script to run when mouse hovers over element
|
onmouseover="show()" |
| onmouseout |
Script to run when mouse leaves element
|
onmouseout="hide()" |
| onfocus |
Script to run when element gets focus
|
onfocus="highlight()" |
| onblur |
Script to run when element loses focus
|
onblur="validate()" |
| onkeydown |
Script to run when key is pressed down
|
onkeydown="checkKey()" |
| onkeyup |
Script to run when key is released
|
onkeyup="search()" |
ARIA Attributes
ARIA (Accessible Rich Internet Applications) attributes improve accessibility for users with disabilities.
| Attribute | Description | Example |
|---|---|---|
| aria-label |
Provides a label for screen readers when visible text
isn't available
|
aria-label="Close" |
| aria-labelledby |
References the ID of another element that labels this
element
|
aria-labelledby="title" |
| aria-describedby |
References the ID of element(s) that describe this element
|
aria-describedby="help" |
| aria-hidden |
Indicates element should be ignored by assistive
technologies
|
aria-hidden="true" |
| aria-live |
Indicates updates to this element should be announced
|
aria-live="polite" |
| aria-expanded |
Indicates whether element is expanded or collapsed
|
aria-expanded="false" |
| aria-pressed |
Indicates pressed state of toggle buttons
|
aria-pressed="true" |
| aria-selected |
Indicates selection state of an item
|
aria-selected="true" |
| aria-disabled |
Indicates element is disabled but still visible
|
aria-disabled="true" |
| role |
Defines the role/purpose of an element for accessibility
|
role="navigation" |
Common Element-Specific Attributes
These attributes are specific to certain HTML elements.
| Attribute | Used On | Description |
|---|---|---|
| href | <a>, <link> | Specifies the URL of the linked resource |
| src | <img>, <script>, <iframe> | Specifies the source URL of the resource |
| alt | <img>, <area> | Specifies alternative text for images (important for accessibility) |
| type | <input>, <button>, <script> | Specifies the type of element |
| value | <input>, <button>, <option> | Specifies the value of the element |
| name | <input>, <select>, <form> | Specifies the name of the element (used in form submission) |
| placeholder | <input>, <textarea> | Specifies placeholder text (hint for expected input) |
| required | <input>, <select>, <textarea> | Boolean attribute - field must be filled before submitting |
| disabled | <input>, <button>, <select> | Boolean attribute - element is disabled and cannot be used |
| readonly | <input>, <textarea> | Boolean attribute - field is read-only (cannot be modified) |
| checked | <input type="checkbox/radio"> | Boolean attribute - checkbox/radio is pre-selected |
| action | <form> | Specifies where to send form data when submitted |
| method | <form> | Specifies HTTP method for sending form data (GET/POST) |
| target | <a>, <form> | Specifies where to open linked document (_blank, _self, etc.) |
| width | <img>, <video>, <canvas> | Specifies the width of the element in pixels |
| height | <img>, <video>, <canvas> | Specifies the height of the element in pixels |
| autoplay | <audio>, <video> | Boolean attribute - media starts playing automatically |
| controls | <audio>, <video> | Boolean attribute - displays playback controls |