HTML attributes provide additional information about HTML elements.
- All HTML elements can have attributes.
- Attributes are always specified in the start tag.
- You can add multiple attributes in one HTML element, separated by a space.
- The Attribute should be applied with its name and value pair (as name="value").
- Attribute values should always be enclosed in quotes.
- Attributes are case sensitive, so they should be written in lowercase.
Here's the list of HTML attributes:
| Attribute | Element | Description |
|---|---|---|
| accept | <form>, <input> |
Specifies the types of files accepted by the server (only for file type) |
| accept-charset | <form> |
Specifies the supported character encodings |
| accesskey | Global attribute (common for all HTML elements) | Specifies a keyboard shortcut to activate or add focus to the element |
| action | <form> |
Specifies the URL to send the form data on form submission |
| align | Not supported in HTML5 | Specifies the horizontal alignment of the element (Use CSS instead) |
| allow | <iframe> |
Specifies a feature-policy for the iframe |
| alt | <area>, <img>, <input> |
Specifies an alternate text in case the element can’t be displayed |
| async | <script> |
Executes the script (only external scripts) asynchronously |
| autocapitalize | Global attribute | Automatically capitalize the user entered input |
| autocomplete | <form>, <input>, <textarea> |
Sets to automatically complete the values by the browser |
| autofocus | <button>, <input>, <select>, <textarea> |
Automatically element gets the focus when the page loads |
| autoplay | <audio>, <video> |
Plays the audio and video as soon as they are ready |
| bgcolor | Not supported in HTML5 | Specifies the background color of the element (Use CSS instead) |
| border | Not supported in HTML5 | Specifies the width of the border of an element (Use CSS instead) |
| buffered | <audio>, <video> |
Contains the time range of already buffered media |
| charset | <meta>, <script> |
Specifies the character encoding of the page or script |
| checked | <input> |
Specifies whether the checkbox or radio input should be checked on page load |
| cite | <blackquote>, <del>, <ins>, <q> |
Specifies the URL of source of the quote/deleted/inserted text |
| class | Global attribute | Specifies one or more classnames for an element to style them in the stylesheet |
| color | Not supported in HTML5 | Specifies the text color of an element (Use CSS instead) |
| cols | <textarea> |
Specifies the number of columns |
| colspan | <td>, <th> |
Specifies the number of columns a cell should span |
| content | <meta> |
Gives the value associated with the http-equiv or name attribute |
| contenteditable | Global attribute | Specifies whether the element’s content is editable or not |
| controls | <audio>, <video> |
Specifies that audio or video controls (play or pause buttons) should be displayed |
| coords | <area> |
Specifies the coordinates |
| data | <object> |
Specifies the URL of the resource |
| data - * | Global attribute | Used to store custom private data of the page or application |
| datetime | <del>, <ins>, <time> |
Specifies data and time |
| default | <track> |
Specifies a default track until user selects a track |
| defer | <script> |
Specifies that the script should be executed after the page has been parsed (only for external scripts) |
| dir | Global attribute | Specifies the text direction for the content |
| dirname | <input>, <textarea> |
Specifies the text direction submission |
| disabled | <button>, <fieldset>, <input>, <optgroup>, <object>, <select>, <textarea> |
Specifies that the element should be disabled |
| download | <a>, <area> |
Specifies that target should be downloaded when the user clicks on the hyperlink |
| draggable | Global attribute | Specifies whether an element is draggable or not |
| enctype | <form> |
Specifies the encoding of form data on submission on server (only for post method) |
| for | <label>, <output> |
Specifies the elements which belongs to this one |
| form | <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> |
Specifies the name of the form the element belongs to |
| formaction | <button>, <input> |
Specifies where to send the form data on form submission (only for type = “submit”) |
| headers | <td>, <th> |
Specifies one or more header cells |
| height | <canvas>, <embed>,<iframe>, <img>, <input>, <object>, <video> |
Specifies the height of the element |
| hidden | Global attribute | Specifies the visibility of an element |
| high | <meter> |
Specifies a high value range |
| href | <a>, <area>, <base>, <link> |
Specifies the URL of the linked resource |
| hreflang | <a>, <area>, <link> |
Specifies the language of the linked document |
| http-equiv | <meta> |
Specifies header information or value of the content attribute |
| id | Global attribute | Specifies a unique id for an element |
| inputmode | Global attribute | Specifies which keyboard to be displayed by the browser (such as numeric, text, tel, email, search or url ) |
| ismap | <img> |
Specifies an image as a server-side image map |
| itemprop | Global attribute | Gives extra information about an element |
| kind | <track> |
Specifies the kind of text track |
| label | <track>, <option>, <optgroup> |
Specifies the title of the element |
| lang | Global attribute | Specifies the language of the content of an element |
| list | <input> |
Specifies a pre-defined list of options to the user |
| loading | <img>, <iframe> |
Specifies whether the element should be loaded lazily (loading=”lazy”) or loaded immediately (loading=”eager”) |
| loop | <audio>, <video> |
Specifies whether the audio or video should start playing from the start when it is finished |
| low | <meter> |
Specifies a low value range |
| max | <input>, <meter>, <progress> |
Specifies the maximum value |
| maxlength | <input>, <textarea> |
Specifies the maximum number of allowed characters in the element |
| media | <a>, <area>, <link>, <source>, <style> |
Specifies the media or device for which the linked document is optimized |
| method | <form> |
Specifies the HTTP method to use when submitting the form |
| min | <input>, <meter> |
Specifies the minimum value |
| minlength | <input>, <textarea> |
Specifies the minimum number of allowed characters in the element |
| multiple | <input>, <select> |
Specifies whether the user can enter more than one value |
| muted | <audio>, <video> |
Specifies that the audio should be muted when page loads |
| name | <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> |
Specifies the name of the element |
| novalidate | <form> |
Specifies that the from should not be validated on submission |
| open | <details>, <dialog> |
Specifies that the content should be visible to user |
| optimum | <meter> |
Specifies the optimum value |
| pattern | <input> |
Specifies a regular expression to validate the element’s value |
| placeholder | <input>, <textarea> |
Gives a hint to the user of what should be the value of the input or textarea field |
| poster | <video> |
Specifies an image to show until the user plays the video |
| preload | <audio>, <video> |
Specifies which part or nothing should be preloaded |
| readonly | <input>, <textarea> |
Specifies that the element is read-only not editable |
| rel | <a>, <area>, <form>, <link> |
Specifies the relation between the current document and the linked document |
| required | <input>, <select>, <textarea> |
Specifies that the element is required to fill |
| reversed | <ol> |
Specifies that the list items order should be descending |
| rows | <textarea> |
Specifies the number of rows |
| rowspan | <td>, <th> |
Specifies the number of rows a cell should span |
| sandbox | <iframe> |
Restricts the iframe from using certain features |
| scope | <th> |
Specifies whether a header cell is a header for column, row or group of columns of rows |
| selected | <option> |
Specifies an option which will be selected when the page loads |
| shape | <area> |
Specifies the shape of the area |
| size | <input>, <select> |
Specifies the width of the element |
| sizes | <img>, <link>, <source> |
Specifies the size of linked resource |
| span | <col>, <colgroup> |
Specifies the number of columns to span |
| spellcheck | Global attribute | Specifies whether to allow the spell check of an element or not |
| src | <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> |
Specifies the URL of embedded content |
| srcdoc | <iframe> |
Specifies the HTML content of the page to display in the <iframe> element |
| srclang | <track> |
Specifies the language of the track text |
| srcset | <img>, <source> |
Specifies different image URL for different situation |
| start | <ol> |
Specifies start value of an ordered list item |
| step | <input> |
Specifies the discrete step size of an input |
| style | Global attribute | Specifies inline CSS for an element |
| tabindex | Global attribute | Specifies the tabbing order of an element |
| target | <a>, <area>, <base>, <form> |
Specifies where to open the linked document or where to submit the form |
| title | Global attribute | Gives extra information about an element |
| translate | Global attribute | Specifies the translation of element’s content |
| type | <a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <ol>, <script>, <source>, <style> |
Specifies the type of an element |
| usemap | <img>, <object> |
Specifies an image as a client-side image map |
| value | <button>, <data>, <input>, <li>, <meter>, <option>, <progress>, <param> |
Specifies the default value of the element which displays on the page load |
| width | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> |
Specifies the width of the element |
| wrap | <textarea> |
Specifies whether the text should be wrapped or not |
👉 Next tutorial: HTML Favicon