HTML Attributes
Here, we’ll examine the all Html attributes and their usage. One of the key features of HTML is the use of attributes, which provide additional information about HTML elements. An HTML element has attributes containing multiple parameters that allow the element to be customized or altered in a number of ways to satisfy the requirements of the user.
Here is an example of the maxlength and action attribute in Html:
Example:
<!DOCTYPE html>
<html>
<body>
<h2 style="color:#6f0722; font-size: 12px;">
Form and Maxlength Attribute
</h2>
<form action="">
Username:
<input type="text" name="username" maxlength="10" placeholder="Enter your Username here">
<br>
<br>
Password:
<input type="password" name="Password" maxlength="8" placeholder="Enter your 8 digit password">
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
HTML Attributes List
HTML attributes are explained here. The table below lists all HTML attributes and the elements they can be used in:
| Attribute | Belongs to | Overview |
|---|---|---|
| accept | <input> | Allows the server to accept certain types of files (only for type=”file”) |
| accept-charset | <form> | Provides details about the character encoding to be used for execution of the form. |
| accesskey | Global Attributes | Activates/focuses an element with a shortcut key |
| action | <form> | Provides instructions on where to send form-data after submission in Html attributes |
| align | Not supported in HTML 5. | Align elements in accordance with their surrounding elements. Instead, use CSS |
| alt | <area>, <img>, <input> | In case of a display failure of the original element, provides an alternate text |
| async | <script> | Asynchronous execution is configured (only for external scripts) in the Html attribute |
| autocomplete | <form>, <input> | Indicates whether automatic fill should be allowed for a <form> or <input> |
| autofocus | <button>, <input>, <select>, <textarea> | As soon as the page loads, the element should immediately receive focus |
| autoplay | <audio>, <video> | Provides that audio/video will start running whenever it is ready asa it comes to Html attributes |
| bgcolor | Not supported in HTML 5. | A background color is provided for an element. It is better to use CSS |
| border | Not supported in HTML 5. | It determines how wide the border of an element is. Make use of CSS instead |
| charset | <meta>, <script> | This property indicates the character encoding in Html attributes |
| checked | <input> | Sets the pre-selection of an <input> element on the page (for example, type=”checkbox” or type=”radio”) |
| cite | <blockquote>, <del>, <ins>, <q> | Provides a link that explains the quote, removed text, or text that has been inserted |
| class | Global Attributes | Indicates one or more class names for an element (those used in style sheets). |
| color | Not supported in HTML 5. | The text color of an element is determined by this attribute. Instead, use CSS when it comes to Html attributes |
| cols | <textarea> | An area of text can be determined by its visible width |
| colspan | <td>, <th> | Determines how many columns a table cell should have |
| content | <meta> | Identifies the value associated with the name or http-equiv attribute |
| contenteditable | Global Attributes | The editability of an element is specified by this property |
| controls | <audio>, <video> | Indicates whether audio/video controls should be displayed (such as play/pause buttons) |
| coords | <area> | Identifies the area’s coordinates |
| data | <object> | gives the resource’s URL, which the object will use |
| data-* | Global Attributes | utilized to store custom data that is only accessible by the page or application in Html attributes |
| datetime | <del>, <ins>, <time> | Identifies the date and time |
| default | <track> | Indicates that the track should be played if the user’s choices don’t point to a different track as being preferable. |
| defer | <script> | Indicates that the script should be run after page parsing is complete (only for external scripts) |
| dir | Global Attributes | Identifies the text direction of an element’s content in its Html attributes |
| dirname | <input>, <textarea> | describes the submission of the text direction |
| disabled | <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> | Indicates to the browser that the provided element or set of elements should be disabled |
| download | <a>, <area> | ensures that when a user hits the hyperlink, the target will be downloaded |
| draggable | Global Attributes | Indicates if an element is draggable or not |
| enctype | <form> | When transmitting form-data to the server, this indicates what form-data needs to be encoded (only for method=”post”) |
| for | <label>, <output> | Identifies the form element(s) to which a label/calculation is bound to |
| form | <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> | Provides the name of the form the element relates with |
| formaction | <button>, <input> | Provides a location for form-data to be sent after submission. For type=”submit” exclusively |
| headers | <td>, <th> | Identifies a cell’s connection to one or more header cells |
| height | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | In Html attribute, indicate the height of the element |
| hidden | Global Attributes | Indicates that an element is no longer applicable or is not applicable at all |
| high | <meter> | Values that are perceived as high are identified in this range |
| href | <a>, <area>, <base>, <link> | Provides the URL of the link’s destination |
| hreflang | <a>, <area>, <link> | Indicate the language of the attached document |
| http-equiv | <meta> | Contains the information/value of the content attribute in an HTTP header |
| id | Global Attributes | Provides an element’s unique id |
| ismap | <img> | Create a server-side image map from an image |
| kind | <track> | Provides details about the text track type |
| label | <track>, <option>, <optgroup> | Provides information about the text track’s title |
| lang | Global Attributes | Sets the language of the content of an element |
| list | <input> | Describes a <datalist> element that holds specified values for an <input> element |
| loop | <audio>, <video> | Provides for a restart of the audio/video upon completion of it |
| low | <meter> | In Html attribute, identify the range of values that are assumed to be low |
| max | <input>, <meter>, <progress> | Provides the maximum value |
| maxlength | <input>, <textarea> | This property indicates the maximum number of characters that may be entered in an element |
| media | <a>, <area>, <link>, <source>, <style> | Indicates the type of media or device for which the linked document is suitable |
| method | <form> | Provides instructions on how to send form data using HTTP |
| min | <input>, <meter> | Indicates a minimum value |
| multiple | <input>, <select> | Indicates that more than one value may be inserted by a user |
| muted | <video>, <audio> | Provides instructions for muting the video’s audio output |
| name | <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> | Provides the element’s name |
| novalidate | <form> | Provide instructions for not validating the form upon submission |
| onabort | <audio>, <embed>, <img>, <object>, <video> | On abort, a script should be executed |
| onafterprint | <body> | After printing the document, run the following script |
| onbeforeprint | <body> | Before printing the document, run the following script |
| onbeforeunload | <body> | In the event that the focus is lost on an element, run the following script |
| onblur | All visible elements. | In the event that the focus is lost on an element, run the following script |
| oncanplay | <audio>, <embed>, <object>, <video> | Run the script when a file is ready to start playing (when it has buffered long enough) |
| oncanplaythrough | <audio>, <video> | Running a script when a file can be played from start to finish free from interruptions or delay |
| onchange | All visible elements. | Script to be executed when the value of an element is altered |
| onclick | All visible elements. | A script that will be executed when the element is pressed |
| oncontextmenu | All visible elements. | A script that is executed when a context menu is invoked |
| oncopy | All visible elements. | Script to be executed whenever the content of the element is copied |
| oncuechange | <track> | Script to be executed whenever a cue shifts in a <track> element |
| oncut | All visible elements. | Script to be executed whenever the content of the element is cut |
| ondblclick | All visible elements. | Script to be executed when the element is clicked twice |
| ondrag | All visible elements. | A script that is executed when an element is dragged |
| ondragend | All visible elements. | The script should be executed after a drag operation has been completed |
| ondragenter | All visible elements. | Once the element has been dragged to the proper drop position, a script will be executed |
| ondragleave | All visible elements. | When an element is removed from a valid drop target, execute this script |
| ondragover | All visible elements. | When an element is dragged over a valid drop point, this script will be executed |
| ondragstart | All visible elements. | Execute this script at the beginning of drag operations |
| ondrop | All visible elements. | Dropping a dragged element triggers a script to be executed |
| ondurationchange | <audio>, <video> | When the media file size fluctuates, execute the script |
| onemptied | <audio>, <video> | If the file becomes inaccessible for whatever reason (e.g. unexpectedly disconnected), you are required to execute this script |
| onended | <audio>, <video> | Script that executes when the media has ended (suitable for messages like “thank you for your attention”) |
| onerror | <audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video> | In case of error, execute the script |
| onfocus | All visible elements. | When the element becomes focused, the script is executed |
| onhashchange | <body> | Script to be executed when the anchor part of a URL has been modified |
| oninput | All visible elements. | When an element is invalid, a script should be executed |
| oninvalid | All visible elements. | Execute the script whenever the user presses a key |
| onkeydown | All visible elements. | Script that should be executed when a key is pressed in the Html attributes |
| onkeypress | All visible elements. | Execute the script in the event that a user releases a key in Html attributes |
| onkeyup | All visible elements. | In the event that a user releases a key, a script will be executed |
| onload | <body>, <iframe>, <img>, <input>, <link>, <script>, <style> | Script to be executed after the element has completed rendering |
| onloadeddata | <audio>, <video> | After loading the media data, execute the script |
| onloadedmetadata | <audio>, <video> | When meta data (like dimensions and duration) is retrieved, this script is executed |
| onloadstart | <audio>, <video> | Prior to anything being processed, execute this script just as the file begins to load |
| onmousedown | All visible elements. | Whenever a mouse button is pushed on an element, a script is executed |
| onmousemove | All visible elements. | Script will continue to execute as long as the mouse cursor is revolving over an element |
| onmouseout | All visible elements. | Whenever the mouse cursor leaves an element, this script is executed |
| onmouseover | All visible elements. | Whenever the mouse cursor moves over for an element, the script will be executed |
| onmouseup | All visible elements. | Whenever a mouse button is pressed over an element, the script is invoked |
| onmousewheel | All visible elements. | script that would be executed if a mouse wheel is moved over an element |
| onoffline | <body> | Script would be executed whenever the browser starts to provide service offline |
| ononline | <body> | Script would be executed whenever the browser starts to work online |
| onpagehide | <body> | Script would be executed whenever the browser starts to work online |
| onpageshow | <body> | Whenever a user browses a page, this script executes |
| onpaste | All visible elements. | If a user enters some information into an element, a script will execute |
| onpause | <audio>, <video> | If the user or computer pauses the media, this script will be executed |
| onplay | <audio>, <video> | Once the media has begun to play, execute the script |
| onplaying | <audio>, <video> | The script should be executed once the media has begun to play |
| onpopstate | <body> | If the history of a window is altered, execute this script. |
| onprogress | <audio>, <video> | script to be executed while the browser is acquiring the media data in Html attributes |
| onratechange | <audio>, <video> | Every time the playback rate fluctuates, execute this script. (e.g., when a user shifts to a slow motion or fast forward mode) |
| onreset | <form> | Choosing the reset option in a form will execute this script |
| onresize | <body> | whenever the dimension of the browser window changes script to be executed |
| onscroll | All visible elements. | The moment an element’s scrollbar is scrolled, this script will execute |
| onsearch | <input> | Whenever the user enters something in a search box (for example, input=”search”), this script will be executed |
| onseeked | <audio>, <video> | At the end-of-seek script to be executed when the seeking attribute is equal to false |
| onseeking | <audio>, <video> | When the seeking attribute is set to be true meaning that seeking is turned on, then the script will be executed |
| onselect | All visible elements. | Whenever an element is chosen, execute the script |
| onstalled | <audio>, <video> | In the event the browser couldn’t fetch the media data for an unknown reason, execute this script |
| onstorage | <body> | Every time a Web Storage area is upgraded, execute this script |
| onsubmit | <form> | Whenever a form is uploaded, execute this script |
| onsuspend | <audio>, <video> | In case fetching the media data is halted before it is successfully loaded, execute this script |
| ontimeupdate | <audio>, <video> | Playing position script to execute when it has changed its position.(e.g. when a user fast forwards to another point in a video) |
| ontoggle | <details> | An open and close script that executes when the user chooses the <details> element |
| onunload | <body> | After a page is finished loading (or the browser window has been shut down), execute the following script |
| onvolumechange | <audio>, <video> | An audio/video volume-adjusting script should be executed every time the volume is adjusted |
| onwaiting | <audio>, <video> | Whenever the media has stopped but is likely to start up again (for example, when it buffers more data), execute this script |
| onwheel | All visible elements. | The movement of the mouse wheel over an element will execute the script |
| open | <details> | Provides that the user should have access to the details (open) |
| optimum | <meter> | Indicate what value is appropriate for the gauge |
| pattern | <input> | The regular expression with which the value of an <input> element should be validated in Html attributes |
| placeholder | <input>, <textarea> | Provides a brief overview of the element’s expected value |
| poster | <video> | A custom image will be displayed during the downloading process or until the user presses the play button |
| preload | <audio>, <video> | Describe how and whether the author believes the audio/video should be loaded at page load |
| readonly | <input>, <textarea> | This element declares that it is read-only |
| rel | <a>, <area>, <form>, <link> | Indicates how the current document is connected to the associated document |
| required | <input>, <select>, <textarea> | Prerequisite for submission of the form is to fill out this element |
| reversed | <ol> | Indicates that the list order is supposed to be descending (9,8,7…) |
| rows | <textarea> | Indicates how many lines should be displayed in a text area |
| rowspan | <td>, <th> | Provides the number of rows that will be included in a table cell |
| sandbox | <iframe> | Allows additional limitations for the content of an <iframes> |
| scope | <th> | The header cell indicates whether it is the header for a column, row, or group of columns or rows |
| selected | <option> | Indicates that as soon as a page loads, an option should be preselected |
| shape | <area> | Provides information about the area’s shape |
| size | <input>, <select> | For <input>, indicate the width in characters, or for <selects>, indicate how many options are shown |
| sizes | <img>, <link>, <source> | This property indicates how large the linked resource is |
| span | <col>, <colgroup> | Indicates how many columns should be spanned |
| spellcheck | Global Attributes | This indicates whether the element should be examined for spelling and grammar |
| src | <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> | Provides the URL of the media file in the Html attributes |
| srcdoc | <iframe> | Indicates what content of the HTML page should appear in the <iframe> |
| srclang | <track> | (If kind=”subtitles”) Indicate the language of the track text data |
| srcset | <img>, <source> | Provides a URL for a specific image to be used in different circumstances |
| start | <ol> | Sets the starting value of Html attributes in an ordered list |
| step | <input> | For an input field, indicate the legal number intervals |
| style | Global Attributes | Provides an element with an inline CSS style |
| tabindex | Global Attributes | Indicates the order in which elements should be tabbed |
| target | <a>, <area>, <base>, <form> | Indicates where the attached document should be opened or where the form should be sent |
| title | Global Attributes | Provides additional details about an element |
| translate | Global Attributes | Determine if or not an element’s content should be translated |
| type | <a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style> | Provides information about the type of element in Html attributes |
| usemap | <img>, <object> | Assists in providing an image as a client-side image map |
| value | <button>, <input>, <li>, <option>, <meter>, <progress>, <param> | An element’s value is contained with in the attribute |
| width | <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> | The width of the element is provided in the Html attributes |
| wrap | <textarea> | When the user submits a form, indicate how text should be wrapped |
HTML Attributes Advantages
Attributes in Html are used to provide additional information about an HTML element. Here are some advantages of using HTML attributes:
- HTML attributes provide accessibility benefits by allowing web developers to add attributes that assistive technologies can use to make web content more accessible to people with disabilities.
- By using certain attributes, such as the “alt” attribute for images, you can help search engines understand the content of your webpage, which can improve your search engine ranking.
- Using attributes helps ensure consistency across different web pages by allowing you to define certain characteristics of an element in one place and reuse them across multiple pages.
- Attributes can be used to style elements and provide visual cues to users about the meaning of the content.
- Certain attributes, such as “href” for links and “src” for images, provide functionality that allows users to interact with and navigate through your web pages.
- The use of certain attributes, such as “aria-” attributes, can help ensure that your web pages comply with accessibility standards.
If this post somehow fulfilled your educational needs, then do share this useful Html attributes with your friends by clicking on the links below.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
