Attributes provide additional features or functionality to an element.
Attributes are placed inside the element's opening tag.
An element can have any number of attributes.
This example is a paragraph with 3 attributes: id, class, and style.
<p id='p1' class='color-teal' style='font-size:16px;'> Paragraph with three attributes. </p>
Attributes have two parts: a name and a value.
<element name1='value1' name2='value2'> ... </element>
<element> is the HTML element.name1 and name2 are the attribute names.value1 and value2 are the attribute values.Regarding placement, HTML attributes fall into 3 categories:
Note: Irrespective the category, an attribute is always just a modifier to an element.
A list with the global attributes that can be applied to any tag.
| Attribute | Description | |
|---|---|---|
| id | Sets a unique identifier for the element. | |
| class | Sets one or more CSS classes to be applied to the element. | |
| style | Sets the style for the element. | |
| data-* |
Defines additional data that can be used by JavaScript. |
|
| hidden | Specifies whether the element is hidden. | |
| title | Sets a title that displays as a tooltip when element is hovered. | |
| tabindex | Sets a tab sequence number relative to the other elements. | |
| lang | Sets the language for the element. | |
| draggable | Specifies whether the element can be dragged. | |
| accesskey | Sets a shortcut key for the element. | |
| inputmode | Sets keyboard configuration for when editing the element. | |
| spellcheck | Specifies whether to spellcheck the element. | |
| autocapitalize | Specifies to capitalize the data entered. | |
| contenteditable | Specifies whether the element is editable. | |
| dir | Sets the display direction: left-to-right or right-to-left. |
|
| is | Specifies that element behaves like a registered custom element. |
Note: Sometimes global attributes have no meaning on certain tags. For example, placing a tabindex on a <meta> tag is pointless. In that case the attribute is ignored.
Attributes that can be applied to a limited number of tags.
| Attribute | Elements | Description | |
|---|---|---|---|
| alt |
img area input |
Sets alternative text for when an image cannot be loaded. | |
| autocomplete |
input select textarea form |
Specifies whether browser can automatically autofill values for an input element. | |
| autofocus |
input select textarea button |
Specifies that element gets focus once the page is loaded. | |
| autoplay |
audio video |
Specifies that the media should play once the page is loaded. | |
| cite |
q blockquote del ins |
Specifies a document that is a citation for a quotation or a text change. | |
| colspan |
td th |
Sets the number of columns that the table cell should span. | |
| controls |
audio video |
Specifies that audio/video controls are displayed. | |
| crossorigin |
img link script audio video |
Specifies how an element will handle crossorigin requests. | |
| datetime |
time del ins |
Specifies the date and time of the changed text or time element. | |
| dirname |
input textarea |
Submits the direction (ltr or rtl) of the input or textarea field. | |
| disabled |
input select textarea button option optgroup fieldset |
Sets the element to disabled | |
| download |
a area |
Specifies to download the target when the element is clicked | |
| for |
label output |
Associates a label or output element with an input element. | |
| form |
input select textarea button meter output object fieldset |
Specifies which form the element belongs to. | |
| formaction |
button input |
Specifies where to process the element value(s) when submitted. | |
| formenctype |
button input |
Specifies the encoding type during form submission. | |
| formmethod |
button input |
Specifies the HTTP method (GET OR POST) to use during form submission. | |
| formnovalidate |
button input |
Specifies that form controls are not validated when the form is submitted. | |
| formtarget |
button input |
Specifies the tab or windows where to display the result. | |
| headers |
td th |
Specifies which header cells the current cell is related to. | |
| height |
img input canvas svg video embed iframe object |
Sets the height of the element. | |
| href |
a area link base |
Specifies the URL of the target page. | |
| hreflang |
a area link |
Specifies the language of the target page. | |
| label |
track option optgroup |
Provides a title for a track or a shorter label for the text in the element. | |
| loop |
audio video |
Specifies that the media repeat playing after it's finished. | |
| max |
input meter progress |
Sets the maximum value allowed for the element. | |
| maxlength |
input textarea |
Sets the maximum character length for the element. | |
| media |
a area link style source |
Sets the optimal media or device for the target document. | |
| min |
input meter |
Sets the minimum value for the element. | |
| multiple |
input select |
Specifies that the element can select multiple files or items. | |
| muted |
audio video |
Specifies the audio output of the media is muted, i.e. no sound. | |
| name |
input select textarea button iframe map meta output fieldset object param |
Sets the name of the element. Used as reference for Javascript, CSS, or form-data. | |
| placeholder |
input textarea |
Sets the placeholder text that shows while no data has been entered yet. | |
| preload |
audio video |
Specifies if and how a media file is preloaded. | |
| readonly |
input textarea |
Specifies that a control is read-only. | |
| rel |
a area link form |
Sets relationship between the current page and the target page. | |
| required |
input select textarea |
Specifies that the element requires a value before submission. | |
| rowspan |
td th |
Sets the number of rows that the table cell spans. | |
| size |
input select |
Sets the number of visible characters in an input control, or the number of visible items in a select control. | |
| sizes |
img link source |
Sets the size of an element depending on a set of media conditions. | |
| span |
col colgroup |
Sets the number of columns the element should span. | |
| src |
img script iframe audio video embed input source track |
Specifies the source (URL) of the element. | |
| srcset |
img source |
Specifies a number of sources (URLs) of the element. The browser uses the 'best' one. | |
| target |
a area form base |
Specifies the tab or windows where to display the result. | |
| type |
input button link style a area ol script source embed object |
Specifies a type detail or refinement of the underlying element. | |
| usemap |
img object |
Binds the element to a map with clickable areas. | |
| value |
input button option data li meter progress param |
Sets the value for the element. | |
| width |
img input canvas svg video embed iframe object |
Sets the width of the element. |
Single-tag attributes that can be applied to one tag only.
| Attribute | Element | Description | |
|---|---|---|---|
| abbr | th | Creates an abbreviated version of the header text. Used by screenreaders. | |
| accept | input | Specifies acceptable file types that can be selected from a file dialog. | |
| accept-charset | form | Sets the character encoding to use when submitting the form. | |
| action | form | Specifies the url of where to submit a form. | |
| async | script | Specifies that the script is executed when page is still loading. | |
| charset | meta | Specifies to the browser what character set to use for the page. | |
| checked | input | Specifies that the checkbox or radio button is checked (turned on). | |
| cols | textarea | Defines the width of a textarea by setting the number of visible characters. | |
| content | meta | Sets the value of the meta tag. Used with name and http-equiv properties. | |
| coords | area | Defines the coordinates for a clickable map area. | |
| data | object | Specifies the source (URL) of the object. | |
| default | track | Sets the default track to use if no other preferences are specified. | |
| defer | script | Specifies to wait executing the script file until the page has been loaded. | |
| enctype | form | Specifies the form data is encoded according to a given encoding type. | |
| high | meter | Sets the high end of the range in a meter control. | |
| http-equiv | meta | Specifies which HTTP header value to set in the meta tag. | |
| ismap | img | Specifies that the image click coordinates are sent to the server. | |
| kind | track | Specifies the type of track, such as captions, subtitles, chapters, etc. | |
| list | input | Specifies a list of suggested values that will appear in a dropdown form. | |
| loading | img | Specifies when to load an image upon page load. | |
| low | meter | Sets the low end of the range in a gauge control. | |
| method | form | Specifies the HTTP method (GET OR POST) to use when submitting the form. | |
| novalidate | form | Specifies that form controls are not validated when the form is submitted. | |
| open | details | Specifies whether the element is open and its contents is visible to the user. | |
| optimum | meter | Sets the optimum value in the range of a gauge control | |
| pattern | input | Specifies a regular expression that is validated when form is submitted. | |
| ping | a | Specifies a space separated list of 'pingable' URLS. | |
| poster | video | Specifies an image to display while video is loading or not playing yet. | |
| reversed | ol | Reverses the display order of the ordered list. | |
| rows | textarea | Set the height of the textarea by specifying the number of visible rows. | |
| sandbox | iframe | Specifies a list of permissions for framed content. | |
| scope | th | Specifies where in a table the header applies. Used by screen readers. | |
| selected | option | Sets the dropdown item that is selected (highlighted). | |
| shape | area | Used with the coords attribute to define the shape of an area. | |
| srcdoc | iframe | Specifies an HTML source of the framed content. | |
| srclang | track | Specifies the source language of the track's text data. | |
| start | ol | Sets the first value in a numeric ordered list. | |
| step | input | Sets the step size for input types: number, date, week, range and others. | |
| wrap | textarea | Specifies how the text in a textarea is wrapped when submitted. |
