html tutorial - Attributes in HTML - html5 - html code - html form
- An attributes is used to define characteristics of an HTML element.
- Attributes are used to provide the additional information about an element.
- HTML attribute is specified inside the start tag.
- The name and value attributes is the important two parts of the HTML attributes.
- name – Name of the attribute. Eg: align.
- value – Value of the attribute. Eg: left, right, center.
Syntax for HTML attributes :
<p align="left">Wikitechy</p>Attributes List
| Attribute | Belongs to | Description |
|---|---|---|
| accept | <input> | Used to specify the types of files that the server accepts (only for type="file") |
| accept-charset | <form> | Used to specify the character encodings that are to be used for the form submission |
| accesskey | Global Attributes | Used to specify a shortcut key to activate/focus an element |
| action | <form> | Used to specify where to send the form-data when a form is submitted |
| align | Not supported in HTML 5. | Used to specify the alignment according to surrounding elements. Use CSS instead |
| alt | <area>, <img>, <input> | Used to specify an alternate text when the original element fails to display |
| async | <script> | Used to specify that the script is executed asynchronously (only for external scripts) |
| autocomplete | <form>, <input> | Used to specify whether the <form> or the <input> element should have autocomplete enabled |
| autofocus | <button>, <input>, <keygen>, <select>, <textarea> |
Used to specify that the element should automatically get focus when the page loads |
| autoplay | <audio>, <video> | Used to specify that the audio/video will start playing as soon as it is ready |
| bgcolor | Not supported in HTML 5. | Used to specify the background color of an element. Use CSS instead |
| border | Not supported in HTML 5. | Used to specify the width of the border of an element. Use CSS instead |
| challenge | <keygen> | Used to specify that the value of the <keygen> element should be challenged when submitted |
| charset | <meta>, <script> | Used to specify the character encoding |
| checked | <input> | Used to specify that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| cite | <blockquote>, <del>, <ins>, <q> | Used to specify a URL which explains the quote/deleted/inserted text |
| class | Global Attributes | Used to specify one or more classnames for an element (refers to a class in a style sheet) |
| color | Not supported in HTML 5. | Used to specify the text color of an element. Use CSS instead |
| cols | <textarea> | Used to specify the visible width of a text area |
| colspan | <td>, <th> | Used to specify the number of columns a table cell should span |
| content | <meta> | Gives the value associated with the http-equiv or name attribute |
| contenteditable | Global Attributes | Used to specify whether the content of an element is editable or not |
| contextmenu | Global Attributes | Used to specify a context menu for an element. The context menu appears when a user right-clicks on the element |
| controls | <audio>, <video> | Used to specify that audio/video controls should be displayed (such as a play/pause button etc) |
| coords | <area> | Used to specify the coordinates of the area |
| data | <object> | Used to specify the URL of the resource to be used by the object |
| data-* | Global Attributes | Used to store custom data private to the page or application |
| datetime | <del>, <ins>, <time> | Used to specify the date and time |
| default | <track> | Used to specify that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate |
| defer | <script> | Used to specify that the script is executed when the page has finished parsing (only for external scripts) |
| dir | Global Attributes | Used to specify the text direction for the content in an element |
| dirname | <input>, <textarea> | Used to specify that the text direction will be submitted |
| disabled | <button>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>,<textarea> |
Used to specify that the specified element/group of elements should be disabled |
| download | <a>, <area> | Used to specify that the target will be downloaded when a user clicks on the hyperlink |
| draggable | Global Attributes | Used to specify whether an element is draggable or not |
| dropzone | Global Attributes | Used to specify whether the dragged data is copied, moved, or linked, when dropped |
| enctype | <form> | Used to specify how the form-data should be encoded when submitting it to the server (only for method="post") |
| for | <label>, <output> | Used to specify which form element(s) a label/calculation is bound to |
| form | <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>,<select>, <textarea> |
Used to specify the name of the form the element belongs to |
| formaction | <button>, <input> | Used to specify where to send the form-data when a form is submitted. Only for type="submit" |
| headers | <td>, <th> | Used to specify one or more headers cells a cell is related to |
| height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> |
Used to specify the height of the element |
| hidden | Global Attributes | Used to specify that an element is not yet, or is no longer, relevant |
| high | <meter> | Used to specify the range that is considered to be a high value |
| href | <a>, <area>, <base>, <link> | Used to specify the URL of the page the link goes to |
| hreflang | <a>, <area>, <link> | Used to specify the language of the linked document |
| http-equiv | <meta> | Provides an HTTP header for the information/value of the content attribute |
| id | Global Attributes | Used to specify a unique id for an element |
| ismap | <img> | Used to specify an image as a server-side image-map |
| keytype | <keygen> | Used to specify the security algorithm of the key |
| kind | <track> | Used to specify the kind of text track |
| label | <track>, <option>, <optgroup> | Used to specify the title of the text track |
| lang | Global Attributes | Used to specify the language of the element's content |
| list | <input> | Refers to a <datalist> element that contains pre-defined options for an <input> element |
| loop | <audio>, <video> | Used to specify that the audio/video will start over again, every time it is finished |
| low | <meter> | Used to specify the range that is considered to be a low value |
| manifest | <html> | Used to specify the address of the document's cache manifest (for offline browsing) |
| max | <input>, <meter>, <progress> | Used to specify the maximum value |
| maxlength | <input>, <textarea> | Used to specify the maximum number of characters allowed in an element |
| media | <a>, <area>, <link>, <source>, <style> |
Used to specify what media/device the linked document is optimized for |
| method | <form> | Used to specify the HTTP method to use when sending form-data |
| min | <input>, <meter> | Used to specify a minimum value |
| multiple | <input>, <select> | Used to specify that a user can enter more than one value |
| muted | <video>, <audio> | Used to specify that the audio output of the video should be muted |
| name | <button>, <fieldset>, <form>, <iframe>,<input>, <keygen>, <map>, <meta>,<object>, <output>, <param>, <select>, <textarea> |
Used to specify the name of the element |
| novalidate | <form> | Used to specify that the form should not be validated when submitted |
| onabort | <audio>, <embed>, <img>, <object>,<video> |
Script to be run on abort |
| onafterprint | <body> | Script to be run after the document is printed |
| onbeforeprint | <body> | Script to be run before the document is printed |
| onbeforeunload | <body> | Script to be run when the document is about to be unloaded |
| onblur | All visible elements. | Script to be run when the element loses focus |
| oncanplay | <audio>, <embed>, <object>, <video> |
Script to be run when a file is ready to start playing (when it has buffered enough to begin) |
| oncanplaythrough | <audio>, <video> | Script to be run when a file can be played all the way to the end without pausing for buffering |
| onchange | All visible elements. | Script to be run when the value of the element is changed |
| onclick | All visible elements. | Script to be run when the element is being clicked |
| oncontextmenu | All visible elements. | Script to be run when a context menu is triggered |
| oncopy | All visible elements. | Script to be run when the content of the element is being copied |
| oncuechange | <track> | Script to be run when the cue changes in a |
| oncut | All visible elements. | Script to be run when the content of the element is being cut |
| ondblclick | All visible elements. | Script to be run when the element is being double-clicked |
| ondrag | All visible elements. | Script to be run at the end of a drag operation |
| ondragend | All visible elements. | Script to be run at the end of a drag operation |
| ondragenter | All visible elements. | Script to be run when an element has been dragged to a valid drop target |
| ondragleave | All visible elements. | Script to be run when an element leaves a valid drop target |
| ondragover | All visible elements. | Script to be run when an element is being dragged over a valid drop target |
| ondragstart | All visible elements. | Script to be run at the start of a drag operation |
| ondrop | All visible elements. | Script to be run when dragged element is being dropped |
| ondurationchange | <audio>, <video> | Script to be run when the length of the media changes |
| onemptied | <audio>, <video> | Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects) |
| onended | <audio>, <video> | Script to be run when the media has reach the end (a useful event for messages like "thanks for listening") |
| onerror | <audio>, <body>, <embed>, <img>,<object>, <script>, <style>, <video> |
Script to be run when an error occurs |
| onfocus | All visible elements. | Script to be run when the element gets focus |
| onhashchange | <body> | Script to be run when there has been changes to the anchor part of the a URL |
| oninput | All visible elements. | Script to be run when the element gets user input |
| oninvalid | All visible elements. | Script to be run when the element is invalid |
| onkeydown | All visible elements. | Script to be run when a user is pressing a key |
| onkeypress | All visible elements. | Script to be run when a user presses a key |
| onkeyup | All visible elements. | Script to be run when a user releases a key |
| onload | <body>, <iframe>, <img>, <input>,<link>, <script>, <style> |
Script to be run when the element is finished loading |
| onloadeddata | <audio>, <video> | Script to be run when media data is loaded |
| onloadedmetadata | <audio>, <video>< | Script to be run when meta data (like dimensions and duration) are loaded |
| onloadstart | <audio>, <video>< | Script to be run just as the file begins to load before anything is actually loaded |
| onmousedown | All visible elements. | Script to be run when a mouse button is pressed down on an element |
| onmousemove | All visible elements. | Script to be run as long as the mouse pointer is moving over an element |
| onmouseout | All visible elements. | Script to be run when a mouse pointer moves ot of an element |
| onmouseover | All visible elements. | Script to be run when a mouse pointer moves over an element |
| onmouseup | All visible elements. | Script to be run when a mouse button is released over an element |
| onmousewheel | All visible elements. | Script to be run when a mouse wheel is being scrolled over an element |
| onoffline | <body> | Script to be run when the browser starts to work offline |
| ononline | <body> | Script to be run when the browser starts to work online |
| onpagehide | <body> | Script to be run when a user navigates away from a page |
| onpageshow | <body> | Script to be run when a user navigates to a page |
| onpaste | All visible elements. | Script to be run when the user pastes some content in an element |
| onpause | <audio>, <video> | Script to be run when the media is paused either by the user or programmatically |
| onplay | <audio>, <video> | Script to be run when the media is ready to start playing |
| onplaying | <audio>, <video> | Script to be run when the media actually has started playing. |
| onpopstate | <body> | Script to be run when the window's history changes. |
| onprogress | <audio>, <video> | Script to be run when the browser is in the process of getting the media data |
| onratechange | <audio>, <video> | Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode). |
| onreset | <form> | Script to be run when a reset button in a form is clicked. |
| onresize | <body> | Script to be run when the browser window is being resized. |
| onscroll | All visible elements. | Script to be run when an element's scrollbar is being scrolled |
| onsearch | <input> | Script to be run when the user writes something in a search field (for <input="search">) |
| onseeked | <audio>, <video> | Script to be run when the seeking attribute is set to false indicating that seeking has ended |
| onseeking | <audio>, <video> | Script to be run when the seeking attribute is set to true indicating that seeking is active |
| onselect | All visible elements. | Script to be run when the element gets selected |
| onshow | <menu> | Script to be run when a |
| onstalled | <audio>, <video> | Script to be run when the browser is unable to fetch the media data for whatever reason |
| onstorage | <body> | Script to be run when a Web Storage area is updated |
| onsubmit | <form> | Script to be run when a form is submitted |
| onsuspend | <audio>, <video> | Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason |
| ontimeupdate | <audio>, <video> | Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media) |
| ontoggle | <details> | Script to be run when the user opens or closes the <details> element |
| onunload | <body> | Script to be run when a page has unloaded (or the browser window has been closed) |
| onvolumechange | <audio>, <video> | Script to be run each time the volume is changed which (includes setting the volume to "mute") |
| onwaiting | <audio>, <video> | Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data) |
| onwheel | All visible elements. | Script to be run when the mouse wheel rolls up or down over an element |
| open | <details> | Used to specify that the details should be visible (open) to the user |
| optimum | <meter> | Used to specify what value is the optimal value for the gauge |
| pattern | <input> | Used to specify a regular expression that an <input> element's value is checked against |
| placeholder | <input>, <textarea> | Used to specify a short hint that describes the expected value of the element |
| poster | <video> | Used to specify an image to be shown while the video is downloading, or until the user hits the play button |
| preload | <audio>, <video> | Used to specify if and how the author thinks the audio/video should be loaded when the page loads |
| readonly | <input>, <textarea> | Used to specify that the element is read-only |
| rel | <a>, <area>, <link> | Used to specify the relationship between the current document and the linked document |
| required | <input>, <select>, <textarea> | Used to specify that the element must be filled out before submitting the form |
| reversed | <ol> | Used to specify that the list order should be descending (9,8,7...) |
| rows | <textarea> | Used to specify the visible number of lines in a text area |
| rowspan | <td>, <th> | Used to specify the number of rows a table cell should span |
| sandbox | <iframe> | Enables an extra set of restrictions for the content in an <iframe> |
| scope | <th> | Used to specify whether a header cell is a header for a column, row, or group of columns or rows |
| scoped | <style> | Used to specify that the styles only apply to this element's parent element and that element's child elements |
| selected | <option> | Used to specify that an option should be pre-selected when the page loads |
| shape | <area> | Used to specify the shape of the area |
| size | <input>, <select>, | Used to specify the width, in characters (for <input>) or specifies the number of visible options (for <select>) |
| sizes | <link> | Used to specify the size of the linked resource |
| span | <col>, <colgroup> | Used to specify the number of columns to span |
| spellcheck | Global Attributes | Used to specify whether the element is to have its spelling and grammar checked or not |
| src | <audio>, <embed>, <iframe>, <img>,<input>, <script>, <source>, <track>,<video> |
Used to specify the URL of the media file |
| srcdoc | <iframe> | Used to specify the HTML content of the page to show in the <iframe> |
| srclang | <track> | Used to specify the language of the track text data (required if kind="subtitles") |
| start | <ol> | Used to specify the start value of an ordered list |
| step | <input> | Used to specify the legal number intervals for an input field |
| style | Global Attributes | Used to specify an inline CSS style for an element |
| tabindex | Global Attributes | Used to specify the tabbing order of an element |
| target | <a>, <area>, <base>, <form> |
Used to specify the target for where to open the linked document or where to submit the form |
| title | Global Attributes | Used to specify extra information about an element |
| translate | Global Attributes | Used to specify whether the content of an element should be translated or not |
| type | <button>, <embed>, <input>, <link>,<menu>, <object>, <script>, <source>,<style> |
Used to specify the type of element |
| usemap | <img>, <object> | Used to specify an image as a client-side image-map |
| value | <button>, <input>, <li>, <option>,<meter>, <progress>, <param> |
Used to specify the value of the element |
| width | <canvas>, <embed>, <iframe>, <img>,<input>, <object>, <video> |
Used to specify the width of the element |
| wrap | <textarea> | Used to specify how the text in a text area is to be wrapped when submitted in a form |
Tips and Notes :
- Based on the W3C standard on HTML5 we can use uppercase or lowercase to define the HTML attributes like lang or LANG or Lang.
- They are strongly recommending to use lowercase for HTML for professional documentation like XHTML.
- Attribute values will be declared inside the quotes. We can use either single quotes ( ‘ ) or double quotes ( “ ).