HTML attribute reference - HTML | MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes • 245 KB fetched
Open original page
HTML attribute reference - HTML | MDN
*
Skip to main content
*
Skip to search
HTML
HTML: Markup language
HTML reference
*
Elements
*
Global attributes
*
Attributes
*
See all…
HTML guides
*
Responsive images
*
HTML cheatsheet
*
Date & time formats
*
See all…
Markup languages
*
SVG
*
MathML
*
XML
CSS
CSS: Styling language
CSS reference
*
Properties
*
Selectors
*
At-rules
*
Values
*
See all…
CSS guides
*
Box model
*
Animations
*
Flexbox
*
Colors
*
See all…
Layout cookbook
*
Column layouts
*
Centering an element
*
Card component
*
See all…
JavaScript JS
JavaScript: Scripting language
JS reference
*
Standard built-in objects
*
Expressions & operators
*
Statements & declarations
*
Functions
*
See all…
JS guides
*
Control flow & error handing
*
Loops and iteration
*
Working with objects
*
Using classes
*
See all…
Web APIs
Web APIs: Programming interfaces
Web API reference
*
File system API
*
Fetch API
*
Geolocation API
*
HTML DOM API
*
Push API
*
Service worker API
*
See all…
Web API guides
*
Using the Web animation API
*
Using the Fetch API
*
Working with the History API
*
Using the Web speech API
*
Using web workers
All
All web technology
Technologies
*
Accessibility
*
HTTP
*
URI
*
Web extensions
*
WebAssembly
*
WebDriver
*
See all…
Topics
*
Media
*
Performance
*
Privacy
*
Security
*
Progressive web apps
Learn
Learn web development
Frontend developer course
*
Getting started modules
*
Core modules
*
MDN Curriculum
*
Check out the video course from Scrimba, our partner
Learn HTML
*
Structuring content with HTML module
Learn CSS
*
CSS styling basics module
*
CSS layout module
Learn JavaScript
*
Dynamic scripting with JavaScript module
Tools
Discover our tools
*
Playground
*
HTTP Observatory
*
Border-image generator
*
Border-radius generator
*
Box-shadow generator
*
Color format converter
*
Color mixer
*
Shape generator
About
Get to know MDN better
*
About MDN
*
Advertise with us
*
Community
*
MDN on GitHub
Blog
Toggle sidebar
*
Web
*
HTML
*
Reference
*
Attributes
Theme
*
OS default
*
Light
*
Dark
English (US)
Remember language
Learn more
*
Deutsch
*
English (US)
*
Español
*
Français
*
日本語
*
한국어
*
Português (do Brasil)
*
Русский
*
中文 (简体)
*
正體中文 (繁體)
HTML attribute reference
Elements in HTML have attributes ; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.
In this article
*
Attribute list
*
Content versus IDL attributes
*
Boolean Attributes
*
Event handler attributes
*
See also
Attribute list
Attribute Name
Elements
Description
accept
<form> , <input>
List of types the server accepts, typically a file type.
accept-charset
<form>
The character set, which if provided must be "UTF-8" .
accesskey
Global attribute
Keyboard shortcut to activate or add focus to the element.
action
<form>
The URI of a program that processes the information submitted via the
form.
align
<caption> , <col> ,
<colgroup> ,
<hr> , <iframe> ,
<img> , <table> ,
<tbody> , <td> ,
<tfoot> , <th> ,
<thead> , <tr>
Specifies the horizontal alignment of the element.
allow
<iframe>
Specifies a feature-policy for the iframe.
alpha
<input>
Allow the user to select a color's opacity on a type="color" input.
alt
<area> ,
<img> , <input>
Alternative text in case an image can't be displayed.
aria-*
All elements
Modifies an element's state or properties in the accessibility tree. Applicability depends on the specific ARIA attribute.
as
<link>
Specifies the type of content being loaded by the link.
async
<script>
Executes the script asynchronously.
autocapitalize
Global attribute
Sets whether input is automatically capitalized when entered by user
autocomplete
<form> , <input> ,
<select> ,
<textarea>
Indicates whether controls in this form can by default have their values
automatically completed by the browser.
autoplay
<audio> ,
<video>
The audio or video should play as soon as possible.
background
<body> , <table> ,
<td> , <th>
Specifies the URL of an image file.
Note: Although browsers and email clients may still
support this attribute, it is obsolete. Use CSS
background-image instead.
bgcolor
<body> , <col> ,
<colgroup> ,
<marquee> ,
<table> ,
<tbody> ,
<tfoot> , <td> ,
<th> , <tr>
Background color of the element.
Note: This is a legacy attribute. Please use the
CSS background-color property instead.
border
<img> , <object> ,
<table>
The border width.
Note: This is a legacy attribute. Please use the
CSS border property instead.
capture
<input>
From the Media Capture specification ,
specifies a new file can be captured.
charset
<meta>
Declares the character encoding of the page or script.
checked
<input>
Indicates whether the element should be checked on page load.
cite
<blockquote> ,
<del> , <ins> ,
<q>
Contains a URI which points to the source of the quote or change.
class
Global attribute
Often used with CSS to style elements with common properties.
color
<font> , <hr>
This attribute sets the text color using either a named color or a
color specified in the hexadecimal #RRGGBB format.
Note: This is a legacy attribute. Please use the
CSS color property instead.
colorspace
<input>
Defines the color space that is used by a type="color" input.
cols
<textarea>
Defines the number of columns in a textarea.
colspan
<td> , <th>
The colspan attribute defines the number of columns a cell should span.
content
<meta>
A value associated with http-equiv or
name depending on the context.
contenteditable
Global attribute
Indicates whether the element's content is editable.
controls
<audio> ,
<video>
Indicates whether the browser should show playback controls to the user.
coords
<area>
A set of values specifying the coordinates of the hot-spot region.
crossorigin
<audio> , <img> ,
<link> , <script> ,
<video>
How the element handles cross-origin requests
csp
<iframe>
Specifies the Content Security Policy that an embedded document must
agree to enforce upon itself.
data
<object>
Specifies the URL of the resource.
data-*
Global attribute
Lets you attach custom attributes to an HTML element.
datetime
<del> , <ins> ,
<time>
Indicates the date and time associated with the element.
decoding
<img>
Indicates the preferred method to decode the image.
default
<track>
Indicates that the track should be enabled unless the user's preferences
indicate something different.
defer
<script>
Indicates that the script should be executed after the page has been
parsed.
dir
Global attribute
Defines the text direction. Allowed values are ltr (Left-To-Right) or
rtl (Right-To-Left)
dirname
<input> ,
<textarea>
disabled
<button> ,
<fieldset> ,
<input> ,
<optgroup> ,
<option> ,
<select> ,
<textarea>
Indicates whether the user can interact with the element.
download
<a> , <area>
Indicates that the hyperlink is to be used for downloading a resource.
draggable
Global attribute
Defines whether the element can be dragged.
enctype
<form>
Defines the content type of the form data when the
method is POST.
enterkeyhint
<textarea> ,
contenteditable
The enterkeyhint
specifies what action label (or icon) to present for the enter key on
virtual keyboards. The attribute can be used with form controls (such as
the value of textarea elements), or in elements in an
editing host (e.g., using contenteditable attribute).
elementtiming
<img> ,
<image> elements inside an <svg> ,
poster images of <video> elements,
elements which have a background-image ,
and elements containing text nodes, such as a <p>
Indicates that an element is flagged for tracking by PerformanceObserver objects using the "element" type. For more details, see the PerformanceElementTiming interface.
fetchpriority
<img> ,
<link> ,
<script>
Signals that fetching a particular image early in the loading process has more or less impact on user experience than a browser can reasonably infer when assigning an internal priority.
for
<label> ,
<output>
Describes elements which belongs to this one.
form
<button> ,
<fieldset> ,
<input> ,
<object> ,
<output> ,
<select> ,
<textarea>
Indicates the form that is the owner of the element.
formaction
<input> ,
<button>
Indicates the action of the element, overriding the action defined in
the <form> .
formenctype
<button> ,
<input>
If the button/input is a submit button (e.g., type="submit" ),
this attribute sets the encoding type to use during form submission. If
this attribute is specified, it overrides the
enctype attribute of the button's
form owner.
formmethod
<button> ,
<input>
If the button/input is a submit button (e.g., type="submit" ),
this attribute sets the submission method to use during form submission
( GET , POST , etc.). If this attribute is
specified, it overrides the method attribute of the
button's form owner.
formnovalidate
<button> ,
<input>
If the button/input is a submit button (e.g., type="submit" ),
this boolean attribute specifies that the form is not to be validated
when it is submitted. If this attribute is specified, it overrides the
novalidate attribute of the button's
form owner.
formtarget
<button> ,
<input>
If the button/input is a submit button (e.g., type="submit" ),
this attribute specifies the browsing context (for example, tab, window,
or inline frame) in which to display the response that is received after
submitting the form. If this attribute is specified, it overrides the
target attribute of the button's
form owner.
headers
<td> , <th>
IDs of the <th> elements which applies to this
element.
height
<canvas> ,
<embed> ,
<iframe> , <img> ,
<input> ,
<object> ,
<video>
Specifies the height of elements listed here. For all other elements,
use the CSS height property.
Note: In some instances, such as
<div> , this is a legacy attribute, in
which case the CSS height property should
be used instead.
hidden
Global attribute
Prevents rendering of given element, while keeping child elements, e.g.
script elements, active.
high
<meter>
Indicates the lower bound of the upper range.
href
<a> , <area> ,
<base> , <link>
The URL of a linked resource.
hreflang
<a> , <link>
Specifies the language of the linked resource.
http-equiv
<meta>
Defines a pragma directive.
id
Global attribute
Often used with CSS to style a specific element. The value of this
attribute must be unique.
integrity
<link> , <script>
This attribute contains one or more hashes of the resource, and is used to ensure that the content of the resource is what the developer expects it to be, and has not been replaced with a malicious copy in a supply chain attack .
See Subresource Integrity .
inputmode
<textarea> ,
contenteditable
Provides a hint as to the type of data that might be entered by the user
while editing the element or its contents. The attribute can be used
with form controls (such as the value of
textarea elements), or in elements in an editing host
(e.g., using contenteditable attribute).
ismap
<img>
Indicates that the image is part of a server-side image map.
itemprop
Global attribute
kind
<track>
Specifies the kind of text track.
label
<optgroup> ,
<option> ,
<track>
Specifies a user-readable title of the element.
lang
Global attribute
Defines the language used in the element.
language
<script>
Defines the script language used in the element.
loading
<img> , <iframe>
Indicates if the element should be loaded lazily
( loading="lazy" ) or loaded immediately
( loading="eager" ).
list
<input>
Identifies a list of pre-defined options to suggest to the user.
loop
<audio> ,
<marquee> ,
<video>
Indicates whether the media should start playing from the start when
it's finished.
low
<meter>
Indicates the upper bound of the lower range.
max
<input> ,
<meter> ,
<progress>
Indicates the maximum value allowed.
maxlength
<input> ,
<textarea>
Defines the maximum number of characters allowed in the element.
minlength
<input> ,
<textarea>
Defines the minimum number of characters allowed in the element.
media
<a> , <area> ,
<link> , <source> ,
<style>
Specifies a hint of the media for which the linked resource was
designed.
method
<form>
Defines which HTTP method to use when
submitting the form. Can be GET (default) or
POST .
min
<input> ,
<meter>
Indicates the minimum value allowed.
multiple
<input> ,
<select>
Indicates whether multiple values can be entered in an input of the type
email or file .
muted
<audio> ,
<video>
Indicates whether the audio will be initially silenced on page load.
name
<button> , <form> ,
<fieldset> ,
<iframe> ,
<input> ,
<object> ,
<output> ,
<select> ,
<textarea> ,
<map> , <meta> ,
<param>
Name of the element. For example used by the server to identify the
fields in form submits.
novalidate
<form>
This attribute indicates that the form shouldn't be validated when
submitted.
open
<details> ,
<dialog>
Indicates whether the contents are currently visible (in the case of
a <details> element) or whether the dialog is active
and can be interacted with (in the case of a
<dialog> element).
optimum
<meter>
Indicates the optimal numeric value.
pattern
<input>
Defines a regular expression which the element's value will be validated
against.
ping
<a> , <area>
The ping attribute specifies a space-separated list of URLs
to be notified if a user follows the hyperlink.
placeholder
<input> ,
<textarea>
Provides a hint to the user of what can be entered in the field.
playsinline
<video>
A Boolean attribute indicating that the video is to be played "inline"; that is, within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.
poster
<video>
A URL indicating a poster frame to show until the user plays or seeks.
preload
<audio> ,
<video>
Indicates whether the whole resource, parts of it or nothing should be
preloaded.
readonly
<input> ,
<textarea>
Indicates whether the element can be edited.
referrerpolicy
<a> , <area> ,
<iframe> , <img> ,
<link> , <script>
Specifies which referrer is sent when fetching the resource.
rel
<a> , <area> ,
<link>
Specifies the relationship of the target object to the link object.
required
<input> ,
<select> ,
<textarea>
Indicates whether this element is required to fill out or not.
reversed
<ol>
Indicates whether the list should be displayed in a descending order
instead of an ascending order.
role
Global attribute
Defines an explicit role for an element for use by assistive technologies.
rows
<textarea>
Defines the number of rows in a text area.
rowspan
<td> , <th>
Defines the number of rows a table cell should span over.
sandbox
<iframe>
Stops a document loaded in an iframe from using certain features (such
as submitting forms or opening new windows).
scope
<th>
Defines the cells that the header test (defined in the
th element) relates to.
selected
<option>
Defines a value which will be selected on page load.
shape
<a> , <area>
size
<input> ,
<select>
Defines the width of the element (in pixels). If the element's
type attribute is text or
password then it's the number of characters.
sizes
<link> , <img> ,
<source>
slot
Global attribute
Assigns a slot in a shadow DOM shadow tree to an element.
span
<col> ,
<colgroup>
spellcheck
Global attribute
Indicates whether spell checking is allowed for the element.
src
<audio> ,
<embed> ,
<iframe> , <img> ,
<input> ,
<script> ,
<source> ,
<track> ,
<video>
The URL of the embeddable content.
srcdoc
<iframe>
srclang
<track>
srcset
<img> , <source>
One or more responsive image candidates.
start
<ol>
Defines the first number if other than 1.
step
<input>
style
Global attribute
Defines CSS styles which will override styles previously set.
summary
<table>
tabindex
Global attribute
Overrides the browser's default tab order and follows the one specified
instead.
target
<a> , <area> ,
<base> , <form>
Specifies where to open the linked document (in the case of an
<a> element) or where to display the response received
(in the case of a <form> element)
title
Global attribute
Text to be displayed in a tooltip when hovering over the element.
translate
Global attribute
Specify whether an element's attribute values and the values of its
Text node
children are to be translated when the page is localized, or whether to
leave them unchanged.
type
<button> ,
<input> ,
<embed> ,
<object> ,
<ol> ,
<script> ,
<source> ,
<style> , <menu> ,
<link>
Defines the type of the element.
usemap
<img> , <input> ,
<object>
value
<button> , <data> ,
<input> , <li> ,
<meter> ,
<option> ,
<progress> ,
<param>
Defines a default value which will be displayed in the element on page
load.
width
<canvas> ,
<embed> ,
<iframe> , <img> ,
<input> ,
<object> ,
<video>
For the elements listed here, this establishes the element's width.
Note: For all other instances, such as
<div> , this is a legacy attribute, in
which case the CSS width property should be
used instead.
wrap
<textarea>
Indicates whether the text should be wrapped.
Content versus IDL attributes
In HTML, most attributes have two faces: the content attribute and the IDL (Interface Definition Language) attribute .
The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via element.setAttribute() or element.getAttribute() . The content attribute is always a string even when the expected value should be an integer. For example, to set an <input> element's maxlength to 42 using the content attribute, you have to call setAttribute("maxlength", "42") on that element.
The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like element.foo . The IDL attribute is always going to use (but might transform) the
Links found on this page
- Skip to main content [direct]
- HTML: Markup language [direct]
- Elements [direct]
- Global attributes [direct]
- See all… [direct]
- Responsive images [direct]
- HTML cheatsheet [direct]
- Date & time formats [direct]
- See all… [direct]
- SVG [direct]
- MathML [direct]
- XML [direct]
- CSS: Styling language [direct]
- Properties [direct]
- Selectors [direct]
- At-rules [direct]
- Values [direct]
- See all… [direct]
- Box model [direct]
- Animations [direct]
- Flexbox [direct]
- Colors [direct]
- See all… [direct]
- Column layouts [direct]
- Centering an element [direct]
- Card component [direct]
- See all… [direct]
- JavaScript: Scripting language [direct]
- Standard built-in objects [direct]
- Expressions & operators [direct]
- Statements & declarations [direct]
- Functions [direct]
- See all… [direct]
- Control flow & error handing [direct]
- Loops and iteration [direct]
- Working with objects [direct]
- Using classes [direct]
- See all… [direct]
- Web APIs: Programming interfaces [direct]
- File system API [direct]
- Fetch API [direct]
- Geolocation API [direct]
- HTML DOM API [direct]
- Push API [direct]
- Service worker API [direct]
- Using the Web animation API [direct]
- Using the Fetch API [direct]
- Working with the History API [direct]
- Using the Web speech API [direct]
- Using web workers [direct]
- All web technology [direct]
- Accessibility [direct]
- HTTP [direct]
- URI [direct]
- Web extensions [direct]
- WebAssembly [direct]
- WebDriver [direct]
- Media [direct]
- Performance [direct]
- Privacy [direct]
- Security [direct]
- Progressive web apps [direct]
- Learn web development [direct]
- Getting started modules [direct]
- Core modules [direct]
- MDN Curriculum [direct]
- Check out the video course from Scrimba, our partner [direct]
- Structuring content with HTML module [direct]
- CSS styling basics module [direct]
- CSS layout module [direct]
- Dynamic scripting with JavaScript module [direct]
- Playground [direct]
- HTTP Observatory [direct]
- Border-image generator [direct]
- Border-radius generator [direct]
- Box-shadow generator [direct]
- Color format converter [direct]
- Color mixer [direct]
- Shape generator [direct]
- About MDN [direct]