The 132 element attributes of HTML

In HTML, an attribute modifies its element. The element's start tag specifies the set of space-separated attributes that modify the element's content. Each attribute always has a name part and most times a value part.

<start-tag [attrName attrName=attrValue etc.] > [content] </start-tag>

This article currently explains 62 of 132 HTML attributes.

Classification by value

The 3 classifications of HTML attributes by values are boolean, enumerated, and non-enumerated attributes.

Boolean attributes need no value. Their presence signals the true state regardless of any given value. And, their absence signals a false state.

<!-- 
  Unspecified boolean attribute name
  has an implicit false value 
-->
<start-tag>

<!-- 
  Specified boolean attribute name 
  has an implicit true value
-->
<start-tag booleanAttributeName>

<!-- 
  Specified boolean attribute name with ANY value
  also has an implicit true value
-->
<start-tag booleanAttributeName="true">
<start-tag booleanAttributeName="false">

The 25 Boolean attributes of HTML are as follows: allowfullscreen, async, autofocus, autoplay, checked, controls, default, defer, disabled, formnovalidate, inert, ismap, itemscope, loop, multiple, muted, nomodule, novalidate, open, playsinline, readonly, required, reversed, selected, shadowrootdelegatesfocus,

Unlike a boolean attribute, an enumerated or a non-enumerated attribute needs a value. Their difference lies in the set of values they accept.

Enumerated attributes accept from a fixed set of predefined value tokens called keywords. It has a default for a missing value as well as a default for an invalid value.

<!-- 
  Unspecified enumerated attribute 
  has an implicit default value for missing values
-->
<start-tag>

<!-- 
  Specified enumerated attribute with a value not valid 
  has an implicit default value for invalid values 
-->
<start-tag enumeratedAttribute="invalid">

<!-- 
  Specified enumerated attribute with a value that's valid 
  uses that explicit value 
-->
<start-tag enumeratedAttribute="valid">

The 29 enumerated attributes of HTML are as follows: as, autocomplete, autocapitalize, contenteditable, crossorigin, dir, draggable, enctype, enterkeyhint, fetchpriority, formenctype, formmethod, hidden, http-equiv, inputmode, kind, loading, method, popover, popovertargetaction, preload, referrerpolicy, scope, shadowrootmode, shape, spellcheck, translate, type, wrap,

Meanwhile, non-enumerated attributes may accept from keywords or freewords. The term "non-enumerated attribute" is not a standard terminology.

<!-- 
  Unspecified non-enumerated attribute 
  has no default value
-->
<start-tag>
  
<!-- 
  Specified non-enumerated attribute with a value not valid 
  has no default value
-->
<start-tag nonEnumeratedAttribute="[invalid]">
  
<!-- 
  Specified non-enumerated attribute with a value that's valid
  uses that value  
-->
<start-tag nonEnumeratedAttribute="[valid-value]">

The 79 non-enumerated attributes are as follows: abbr, accept, accept-charset, accesskey, action, allow, alt, blocking, charset, cite, class, color, cols, colspan, content, coords, data, data-[custom-name], datetime, decoding, dirname, download, for, form, formaction, formtarget, headers, height, high, href, hreflang, id, imagesizes, imagesrcset, integrity, is, itemid, itemprop, itemref, itemtype, label, lang, list, low, max, maxlength, media, min, minlength, name, nonce, optimum, pattern, ping, placeholder, popovertarget, poster, rel, rows, rowspan, sandbox, size, sizes, slot, span, src, srcdoc, srclang, srcset, start, step, style, tabindex, target, title, type, usemap, value, width

Note that the type is either an enumerated or a non-enumerated attribute depending on an element.

Classification by application

The 3 classifications of HTML attributes by applications are global, district, and local attributes.

Global attributes apply to all HTML elements.

The 28 Global attributes of HTML are as follows: accesskey, autocapitalize, autofocus, class, contenteditable, dir, draggable, enterkeyhint, hidden, id, inert, inputmode, is, itemid, itemprop, itemref, itemscope, itemtype, lang, nonce, popover, slot, spellcheck, style, tabindex, title, translate, data-[custom-name],

Meanwhile, district attributes apply to more than 1 HTML element and less than all HTML elements. The term "district attribute" is not a standard terminology.

The 56 district attributes of HTML are as follows: alt, autocomplete, autoplay, blocking, cite, colspan, controls, crossorigin, datetime, dirname, disabled, download, fetchpriority, for, form, formaction, formenctype, formmethod, formnovalidate, formtarget, headers, height, href, hreflang, integrity, label, loading, loop, media, max, maxlength, min, minlength, multiple, muted, name, open, ping, placeholder, popovertarget, popovertargetaction, preload, readonly, referrerpolicy, rel, required, rowspan, size, sizes, span, src, srcset, target, type, value, width,

Lastly, local attributes apply to only one element. The term "local attribute" is not a standard terminology.

The 48 local attributes of HTML are as follows: abbr, accept, accept-charset, action, allow, allowfullscreen, as, async, charset, checked, color, cols, content, coords, data, decoding, default, defer, enctype, high, http-equiv, imagesizes, imagesrcset, ismap, kind, list, low, method, nomodule, novalidate, optimum, pattern, playsinline, poster, reversed, rows, sandbox, scope, selected, shadowrootdelegatesfocus, shadowrootmode, shape, srcdoc, srclang, start, step, usemap, wrap,

hidden attribute

The hidden attribute hides an element from the users.

It applies to all elements.

The syntax on any element is an enumerated attribute whose value must be either of the following keywords:

until-found

The until-found keyword hides an element until a user seaches or jumps to its content.

hidden

The hidden keyword hides an element always from a user.

An empty string is a synonym to the hidden keyword.

The default for the missing value is a visible state, while that of the invalid state is the hidden keyword.

<any-element hidden="[hidden|until-found]">

ismap attribute

The ismap attribute identifies a server-side image map.

It applies to only an img element.

The syntax on an img element is a boolean attribute that needs no value.

<img ismap>

name attribute

The name attribute either identifies a collection item or specifies a type of additional metadata.

It applies as follows:

The syntax on an applicable element is a non-enumerated attribute whose value is an identifier.

<applicable-element name="[identifier]"]>

usemap attribute

The usemap attribute associates an image map to an image resource.

It applies to only an img element.

The syntax on an img element is a non-enumerated attribute whose value must be a valid hash-name reference.

<img usemap="[hash-name-ref]">

headers attribute

The headers attribute associate the a cell to a set of header cells.

It applies to both th element and td element.

The syntax on an applicable element is a non-enumerated attribute whose value must be an unordered set of space-separated IDs. A th element must not be targeted by itself.

<applicable-element headers="[ID ID etc.]">

scope attribute

The scope attribute associate an header cell to a set of cells.

It applies to only th elements.

The syntax on an applicable element is an enumerated attribute whose value is one of the following:

row

The row keyword signifies that the header cell applies to some of the subsequent cells in the same row(s)

col

The col keyword signifies that the header cell applies to some of the subsequent cells in the same column(s)

rowgroup

The rowgroup keyword signifies that the header cell applies to all the remaining cells in the row group

colgroup

The colgroup keyword signifies that the header cell applies to all the remaining cells in the column group

auto

The auto keyword signifies that the header cell applies to a set of cells selected based on context

The default for both missing value and invalid value is the auto keyword.

<applicable-element scope="[auto|row|col|rowgroup|colgroup]">

target attribute

The target attribute associates the opening context for a resource. To a form element, the resource is the response of the form submission.

It applies to the following elements: base, a, area, and form.

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid navigatable target name or keyword.

<applicable-element target="[]">

for attribute

The for attribute associates an element to a content form

It applies to both the label element and output element.

The syntax is a non-enumerated attribute whose value must be either an ID when on a label element or a set of unique space-separated ID when on an output element.

<applicable-element for="[hash-name-ref]">

form attribute

The form attribute associates an element to a form element.

It applies to the following 7 elements: textarea, select, input, button, output, object, and fieldset.

The syntax on an applicable element is a non-enumerated element whose value must be a valid hash-name reference.

<applicable-element usemap="[hash-name-ref]">

cite attribute

The cite attributes specifies the address for either a changelog or quotation source.

It applies as follows:

The syntax on an applicable element is a non-enumerated element whose value must be a valid URL.

<applicable-element cite="[valid-url]">

href attribute

The href attribute specifies either a URL address of a link, or a URL address prefix for all relative links.

It applies as follows:

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid URL address.

<applicable-element href="[valid URL address]">

ping attribute

The ping attribute notifies a list of URLs when a user follows a hyperlink.

It applies to a and area elements.

The syntax on an applicable element is a non-enumerated attribute whose value must be a set of space-separated https URLs.

<applicable-element ping="[https-url https-url etc.]">

download attribute

The download attribute enables a hyperlink to download the resource it links to.

The syntax on an applicable element is a boolean attribute that needs no value.

<applicable-element download>

srcdoc attribute

The srcdoc attribute specifies html document content.

It applies to only an iframe element.

The syntax on an iframe element is a non-enumerated attribute whose value must do the following:

<iframe srcdoc="[escaped-html-document-content]"></iframe>

imagesrcset attribute

The srcset attribute specifies one or more alternative addresses of an image resource at a different width or density.

It applies to only the link element. However, it has the synonym srcset that applies to more elements.

The syntax on an applicable element is a non-enumerated attribute that expects the following:

<img srcset="[IMS, IMS, etc.]">

<!-- 
  IMS = [image-address] [space] [width-descriptor | pixel-density-descriptor]
-->

srcset attribute

The srcset attribute is a synonym for the imagesrcset attribute.

However, it applies to the following elements: link, source, and img elements

src attribute

The src attribute specifies the address of a resource to insert in the document.

It applies to the following elements: input, img, audio, video, source, track, iframe, embed, and script.

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid URL.

<applicable-element src="[valid-url]">

data attribute

The data attribute specifies the address of a foreign resource.

It applies to only an object element.

The syntax on an object element is a non-enumerated attribute whose value must be a valid URL.

<object data=""></object>

shape attribute

The shape attribute specifies the model of an element's region.

It applies to only an area element.

The syntax on an area element is an enumerated attribute whose value is one of the following keywords: poly, for a polygonal region; rect, for a rectangular region; and circle, for a circular region. The default for either a missing value, or an invalid value is the rect keyword.

<area shape="[poly|rect|circle|default]">

kind attribute

The kind attribute specifies the model of a timed text resource.

It applies to only a track element.

The syntax on a track element is an enumerated attribute whose value is one of the following keywords:

subtitles
This keyword specifies the resource as an alternative text for the sound of an audio or a video element
captions
This keyword specifies the resource as an alternative text for the sound and sound effects of either an audio element, or a video element
descriptions
This keyword specifies the resource as an alternative text for the sound and visuals of a video element
chapters
This keyword specifies the resource as a list of chapters for navigation purpose
metadata
This keyword specifies the resource as content for scripts

The default for a missing value is the subtitles keyword. And, the default for an invalid value is the metadata keyword.

<track kind="[subtitles|captions|descriptions|chapters|metadata]">

rel attribute

The rel attribute either specifies the model of a link element along with resource hints, or manages a top-level browsing context.

It applies to the following elements: link, a, area, and form.

The syntax on an applicable element is a non-enumerated attribute whose value is an unordered set of unique space-separated tokens. These tokens are element-specific.

To specify the model of a link element, the supported tokens in its rel attribute are as follows: next, search, icon, stylesheet, alternate, manifest, and stylesheet. These tokens are discussed under the link element.

To specify the resource hint on a link element, the supported tokens in the rel attribute are as follows: preload, modulepreload, preconnect, prefetch, and dns-prefetch. These tokens are discussed under the link element.

To manage a top-level browsing context of the following elements: a, area, and form; the supported tokens in their rel attribute are as follows:

noferrer
This token avoids sending referrer information to the external resource
noopener
This token removes the auxiliary browsing context of a new window that opens the external resource
opener
This includes the auxiliary browsing context of a new window that opens the external resource
<applicable-element rel="[token token etc.]">

type attribute

The type attribute specifies either a model of an element or a model of an element's resource.

It applies as follows:

On an ol element

The type attribute specifies the kind of marker to use for each list item.

The syntax on an ol element is an enumerated attribute whose value is one of the following keywords:

1

The number one character keyword specifies decimal numbers as the marker type for an ordered list.

a

The lowercase letter a character keyword specifies lowercase latin alphabet as the marker type for an ordered list

A

The uppercase letter A character keyword specifies an uppercase latin alphabet as the marker type for an ordered list

i

The lowercase letter i character keyword specifies a lowercase roman numerals as the marker type for an ordered list

I

The uppercase letter I character keyword specifies an uppercase roman numerals as the marker type for an ordered list

The default for missing value or invalid value is the number 1 character keyword.

<ol type="[1|a|A|i|I]"></ol>

The syntax on an applicable element is either of the following:

<applicable-element type="[MIME TYPE | element-specific]">

coords attribute

The coords attribute specifies the coordinates for the value of the shape attribute.

It applies to only an area element.

The syntax on an area element is a non-enumerated attribute whose value, if specified, must contain a valid list of floating-point numbers.

<area coords="">

srclang attribute

The srclang attribute specifies the language of the timed text resource.

It applies to only a track element.

The syntax on a track element is a non-enumerated attribute whose value must be a valid BCP 47 language tag.

<track srclang="[valid BCP 47 language tag]">

default attribute

The default attribute specifies the timed text resource to use pending a user's preference.

It applies to only a track element.

The syntax on a track element is a boolean attribute that needs no value.

<track default>

media attribute

The media attribute restricts a resource to a particular device.

It applies to the following elements: link, style, meta, and source.

The syntax on an applicable element is a non-enumerated attribute that must contain a valid media query list.

<applicable-element media="[media-query-list]"]>

loading attribute

The loading attribute indicates the mechanism for loading a resource outside the viewport.

It applies to the following elements: img, and iframe.

The syntax on an applicable element is an enumerated attribute whose value is either a lazy or eager keyword.

lazy
This keyword fetches a resource on conditions
eager
This keyword fetches a resource immediately
<applicable-element loading="[lazy|eager]">

decoding attribute

The decoding attribute hints at the method to decode an image resource.

It applies to only an img element.

The syntax on an img element is an enumerated attribute whose value is one of the following keywords:

sync

This synchronous keyword allows for atomic presentation with other content

asyc

This asynchronous keyword avoids delaying the presentation of other content

auto

This keyword indicates no preference in decoding an image.

The default for both missing value and invalid value is the auto keyword.

<img decoding="[auto|sync|async]">

crossorigin attribute

The crossorigin attribute enables a Cross Origin Sharings (CORS) request.

It applies to the following elements: script, link, img, audio, and video element.

The syntax on an applicable element is an enumerated attribute whose value is one of the following keywords:

anonymous

This keyword sends a cross-origin request without a credential

use-credentials

This keyword sends a cross-origin request with a credential.

A missing value, thus missing attribute, disables CORS. While the default for an invalid value is the anonymous keyword.

<applicable-element crossorigin="[anonymous|use-credentials]">

referrerpolicy attribute

The referrerpolicy specifies the referrer to send along with a request

It applies to the following elements:

The syntax on an applicable element is an enumerated attribute whose value is one of the following 9 keywords called policies:

no-referrer

This policy sends no Referrer URL along with any request

unsafe-url

This policy sends a Referrer URL along with any request

no-referrer-when-downgrade

This policy does either of the following:

origin

This policy sends a URL origin along with any request

strict-origin

This origin does either of the following:

same-origin

This policy sends either of the following:

  • A Referrer URL along with same-origin requests

  • No Referrer URL along with cross-origin requests

origin-when-cross-origin

This policy sends either of the following:

  • A Referrer URL along with same-origin requests

  • A URL origin along with cross-origin request

strict-origin-when-cross-origin

This policy does origin-when-cross-origin policy to equal or more secured protocols.

""

This empty string policy sends an inherited referrer policy. If none, it does the no-referrer-when-downgrade policy.

Note that, a Referrer URL is a URL without the following: fragment, username, and password.

The default for both missing value and invalid value is the empty string policy.

<applicable-element referrerpolicy="[policy-token]">

fetchpriority attribute

The fetchpriority attribute sets the priority to use in fetching the resource.

It applies to the following elements: link, script and img elements.

The syntax on an applicable element is an enumerated attribute whose value is one of the following keywords:

high

This keyword signals a high-priority fetch relative to other resources with the same destination

low

This keyword signals a low-priority fetch relative to other resources with the same destination

auto

This keyword signals an auto-priority fetch relative to other resources with the same destination

The default for both missing value and invalid value is the auto keyword.

<applicable-element fetchpriority="[auto|low|high]">

imagesizes attribute

The imagesizes attribute specifies the dimension of an image resource.

It applies to only a link element. However, it is a synonym for the sizes attribute on either a source element or an img element.

The syntax on an applicable element is a non-enumerated attribute whose value must be a set of comma-separated tokens. Each token contains both a media-condition and a width, separated by a space.

  <applicable-element sizes="[[media-condition width], [media-condition width], etc.]">

sizes attribute

The sizes attribute specifies the dimension of a graphic resource.

It applies to the following elements:

The syntax on an applicable element is a non-enumerated attribute whose value is element-specific as follows:

width attribute

The width attribute specifies the wideness of a resource.

It applies to the following elements: input, svg, img, canvas, video, source, iframe, embed, or object.

The syntax on applicable element is a non-enumerated attribute whose value is a non-negative integer rendered in CSS pixels.

<applicable-element width="[non-negative-integer]">

height attribute

The height attribute specifies the wideness of a resource.

It applies to the following elements: input, svg, img, canvas, video, source, iframe, embed, or object.

The syntax on applicable element is a non-enumerated attribute whose value is a non-negative integer rendered in CSS pixels.

<applicable-element height="[non-negative-integer]">

preload attribute

A preload attribute hints at the loading mechanism of a media resource.

It applies to either an audio element, or a video element.

The syntax on an applicable element is an enumerated attribute whose is one of the following keywords:

none

This keyword hints at no download of the resource

metadata

This keyword hints at fetching the metadata of a media resource

auto

This keyword hints at fetching the whole of a media resource

The default for either missing value or invalid value is browser-specific but metadata keyword is recommended.

<applicable-element preload="[metadata|none|auto]">

controls attribute

The controls attribute shows the control buttons of the user agent on a media resource

It applies to either an audio element or a video element.

The syntax on an applicable element is a boolean attribute that needs no value.

<applicable-element controls>

autoplay attribute

The autoplay attribute automatically plays a media resource as soon as it can do so.

It applies to either an audio element or a video element.

The syntax on an applicable is a boolean attribute that needs no value.

<applicable-element autoplay>

loop attribute

The loop attribute continuously replays a media resource as soon as it ends.

It applies to either an audio element or a video element.

The syntax on an applicable element is a boolean attribute that needs no value.

<applicable-element loop>

muted attribute

The muted attribute disables the sound of a media resource.

It applies to either an audio element or a video element.

The syntax on an applicable element is a boolean attribute that needs no value.

<applicable-element muted>

playsinline attribute

The playsinline attribute hints at playing a video resource inline rather than at fullscreen.

It applies to only a video element.

The syntax on a video element is a boolean attribute that needs no value.

<applicable-element playsinline>

poster attribute

The poster attribute specifies the preview image for a video resource.

It applies to only a video element.

The syntax on a video element is a non-enumerated attribute whose value must be a valid URL.

<video poster="[valid-url]"></video>

allow attribute

The allow attribute permit features for child document elements.

It applies to only an iframe element.

The syntax on an iframe element is a non-enumerated attribute whose value must be a permissions-policy.

<iframe allow="[permissions-policy]"></iframe>

allowfullscreen attribute

The allowfullscreen attribute permits a fullscreen feature for child document elements that needs it.

It applies to only an iframe element.

The syntax on an iframe element is a boolean attribute that needs no value.

<iframe allowfullscreen></iframe>

sandbox attribute

The sandbox attribute specifies security rules for a child document.

It applies to only an iframe element.

The syntax on an iframe element is a non-enumerated attribute whose value must be an unordered set of space-separated security tokens.

<iframe sandbox="security-token security-token etc."></iframe>

multiple attribute

The multiple attribute allows a content form to accept more than one entry.

It applies to both a select element and an input element.

The syntax on an applicable element is a boolean attribute that needs no value.

<applicable-element multiple>

size attribute

The size attribute specifies the number of items in the viewport of a content form.

It applies to both a select element for the number of option items and an input element for the number of character items.

The syntax on an applicable element is a non-enumerated attribute whose value must be a non-negative integer.. The default value on a select element with a mutliple attribute is 4. Without the attribute, it's 1. However, the default value on applicable input elements is 20.

<applicable-element size="[non-negative integer]">

min attribute

The min attribute specifies the lower bound of a range.

It applies to both a meter element and a kind of input element.

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid floating-point number.

<applicable-element min="[floating-point-number]">

value attribute

The value attribute has different meanings depending on an element it applies to.

On an li element

The value attribute specifies the starting number for a list item.

The syntax on an li element is a non-enumerated attribute whose value must be a valid integer.

<li value="[valid-integer]"></li>

The syntax on an applicable element is a non-enumerated attribute whose value depends on the element.

<applicable-element value="[floating-point-number]">

max attribute

The max attribute specifies the upper bound of a range.

It applies to the following elements: progress, meter, and a kind of input.

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid floating-point number.

<applicable-element max="[floating-point-number]">

low attribute

The low attribute specifies the low part of a bounded range.

It applies to only the meter element.

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid floating-point number. This number is be the highest position of the low part of a bounded range.

<applicable-element low="[floating-point-number]">

high attribute

The high attribute specifies the high part of a bounded range.

It applies to only the meter element.

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid floating-point number. This number is be the lowest position of the high part of a bounded range.

<applicable-element high="[floating-point-number]">

optimum attribute

The optimum attribute specifies the preferable part of a bounded range.

It applies to only the meter element.

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid floating-point number.

<applicable-element optimum="[floating-point-number]">

datetime attribute

The datetime attribute specifies a machine-readable datetime format. It may have special meanings depending on an element.

It applies as follows:

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid datetime representation. On both ins element and del element, the time is optional.

<applicable-element datetime="[valid-datetime]">

start attribute

The start attribute specifies the starting number of an ordered list.

It applies to only the ol element.

The syntax on an ol element is a non-enumerated attribute whose value must be a valid integer.

<ol start="[valid-integer]"></ol>

reversed attribute

The reversed attribute presents an ordered list in a descending order.

It applies to only the ol element.

The syntax on an ol element is a boolean attribute that requires no value.

<ol reversed></ol>

span attribute

The span attribute specifies the number of columns to target.

It applies to both colgroup element and col element.

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid non-negative integer. greater than zero and less than or equal to 1000.

<applicable-element colspan="[1 <= integer <= 1000]">

colspan attribute

The colspan attribute specifies the number of columns a cell will occupy.

It applies to both th element and td element.

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid non-negative integer. greater than zero and less than or equal to 1000.

<applicable-element colspan="[1 <= integer <= 1000]">

rowspan attribute

The rowspan attribute specifies the number of rows a cell will occupy.

It applies to both th element and td element.

The syntax on an applicable element is a non-enumerated attribute whose value must be a valid non-negative integer less than or equal to 65534. The zero value means that the cell is to occupy the remaining rows in the row group.

<applicable-element rowspan="[0 <= integer <= 65534]">

abbr attribute

The abbr attribute specifies an alternative title to a header cell for reference purposes.

It applies to only th elements.

The syntax on an applicable element is a non-enumerated attribute whose value must be a non-empty text.

<applicable-element abbr="[non-empty-text]">

label attribute

The label attribute specifies a user-readable title.

It applies to the following elements: option, optgroup, and track elements.

The syntax on an applicable element is a non-enumerated attribute whose value must be a non-empy string.

<applicable-element label="[non-empty-text]">

alt attribute

The alt attribute specifies the alternative text for an image resource.

It applies to the following elements: img, area, and input.

The syntax on an applicable element is a non-enumerated attribute whose value must be a text, empty or not.

<applicable-element alt="[text]">