HTML Attributes

Complete reference guide to HTML attributes including global, event, ARIA, and element-specific attributes

16
Global Attributes
30+
Event Attributes
50+
ARIA Attributes
100+
Element-Specific

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