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"
.
<tagname attribute="value">Content</tagname> <!--
Examples --> <a href="https://example.com"
target="_blank">Link</a> <img src="image.jpg"
alt="Description" width="300"> <div id="header"
class="container primary">Content</div>
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 |