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:


<!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>,
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>,
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>,
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.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *