HTML Attribute Reference

Jan 04, 2023

15 min read

HTML elements have attributes. These these are additional values that can be applied to the elements that configure or adjust their behavior.

abbr

Used with: <input>

The abbr Attribute specifies a short abbreviated description or alternative label for the header cell.

accept

Used with: <input>

The accept Attribute specifies the file types accepted by the file upload control.

accept-charset

Used with: <form>

The accept-charset Attribute specifies the character encoding to be used for a <form> submission.

accesskey

Used with: Global Attributes

The accesskey Attribute allows you to specify a keyboard shortcut to focus or activate a specific element.

action

Used with: <form>

The action Attribute specifies the URL where the <form> data is sent on submission.

allow

Used with: <input>

The allow attribute specifies a permissions policy to define what permissions are available to an iframe.

alt

Used with: <area> <img> <input>

The alt attribute specifies the alternative text to be used if the element it is representing is not displayed.

async

Used with: <script>

The async attribute is a boolean that determines whether the script should be fetched asynchronously.

autocomplete

Used with: <form> <input>

The autocomplete attribute specifies whether the browser can automatically populate <input> <form> elements.

autofocus

Used with: <button> <input> <select> <textarea>

The autofocus attribute specifies whether the <element> should be auto-focused when the page document loads.

autoplay

Used with: <audio> <video>

The autoplay attribute is a boolean that specifies whether the audio or video should begin to play automatically as soon as it starts to download.

charset

Used with: <meta>

The charset attribute specifies the character encoding for the HTML document.

checked

Used with: <input>

The checked attribute is a boolean that specifies whether the <input> control should be pre-selected.

The cite attribute’s usage depends on its element. For instance, it could represent the URL of the source of a quotation or an URL or URL fragment pointing to the reasons for inserting or deleting text.

class

Used with: Global Attributes

The class global attribute specifies one or more class names for an HTML element.

cols

Used with: <textarea>

The cols attribute specifies the maximum number of characters per line in the <textarea> element.

colspan

Used with: <td> <th>

The colspan attribute specifies the number of columns in a <table> element the <td> cell extends.

content

Used with: <meta>

The content attribute specifies the name for the http-equiv or name attribute, depending on which is used.

contenteditable

Used with: Global Attributes

The contenteditable attribute specifies whether an element should be editable by the user.

controls

Used with: <audio> <video>

The controls attribute specifies whether to display the default browser video or audio player enabling the user to stop or start the playback, change the volume, and position seek.

coords

Used with: <area>

The coords attribute details the coordinates of the relevant shape attribute.

data

Used with: <object>

The data attribute specifies the URL of the resource to display in the <object> element.

datetime

Used with: <del> <ins> <time>

The datetime attribute specifies a date, time, or both in a machine-readable format.

default

Used with: <track>

The default attribute, when used with the <track> element, specifies that the text track should be enabled.

defer

Used with: <script>

The defer attribute is a boolean that determines whether a script should be fetched only after the HTML has been parsed.

dir

Used with: Global Attributes

The dir Attribute specifies the direction of the element’s text.

dirname

Used with: <input> <textarea>

The dirname Attribute on a form control element allows the submission of the element’s directionality along with the form data.

disabled

Used with: <button> <fieldset> <input> <optgroup> <option> <select> <textarea>

The disabled Attribute is a boolean that is used to disable form controls, such as buttons, inputs, options and more.

download

Used with: <a> <area>

The download Attribute specifies that the target will be downloaded rather than followed. You can add an optional value specifying the name of the downloaded file.

draggable

Used with: Global Attributes

The draggable Attribute specifies whether the element can be dragged either via native browser functionality, or with the Drag and Drop API.

enctype

Used with: <form>

The enctype Attribute specifies how to encode the form on submission for method="post" HTTP methods.

for

Used with: <label> <output>

The for Attribute specifies the id of a form element a label is bound to, or references the id attribute of an element to be used in a calculation.

form

Used with: <button> <fieldset> <input> <label> <meter> <object> <output> <select> <textarea>

The form Attribute allows you to associate form elements to a form even if they are positioned outside the form element.

formaction

Used with: <button> <input>

The formaction Attribute specifies the URL that processes the information submitted by the form.

formenctype

Used with: <button> <input>

The formenctype Attribute specifies the method of encoding of information sent to a server for forms with type=submit.

formmethod

Used with: <button> <input>

The formmethod Attribute specifies the method of encoding of information sent to a server for forms with type=submit.

formnovalidate

Used with: <button> <input>

The formnovalidate Attribute specifies whether to validate the form when submitted.

formtarget

Used with: <button> <input>

The formtarget Attribute specifies where to display the response after submitting the form where the type="submit".

If specified, it overrides the target attribute of the <form> element.

headers

Used with: <td> <th>

The headers Attribute allows you to assign one or more headers to a particular cell.

height

Used with: <canvas> <embed> <iframe> <img> <input> <object> <video>

The height Attribute specifies the height of the element in pixels.

hidden

Used with: Global Attributes

The hidden attribute is a boolean that specifies that an element is not relevant and should not be displayed by the browser.

high

Used with: <meter>

The high Attribute is used with a <meter> element to specify a level over which the value is considered too high.

href

Used with: <a> <area> <base> <link>

The href Attribute specifies an URL that the element can use. For instance:

<a> and <area> elements - it specifies the URL of the page the link goes to.
<base> elements - it sets a base URL to be used for relative URLs on a page.
<link> elements - it specifies the the URL of the external resource.

hreflang

Used with: <a> <area> <link>

The hreflang Attribute specifies the language of the linked document. Its use is purely advisory.

http equiv

Used with: <meta>

The http equiv Attribute specifies how the element deals with cross-origin requests.

id

Used with: Global Attributes

The id Attribute specifies a unique identifier for an HTML element.

integrity

Used with: Global Attributes

The integrity Attribute is used with a <script> element to enable a browser (or other user agents) to verify that a fetched resource has not been manipulated.

ismap

Used with: <img>

The ismap Attribute is a boolean that specifies an image as a server-side map. This attribute is only permitted where the <img> element is a descendant of an <a> element with a href attribute.

kind

Used with: <track>

The kind Attribute specifies the kind of text track to use with an <audio> or <video> element.

label

Used with: <track> <option> <optgroup>

The label Attribute specifies specifies specifies a user-readable label.

lang

Used with: Global Attributes

The lang Attribute specifies the language of an element’s content.

list

Used with: <input>

The list Attribute specifies the id of the <datalist> element that contains a list of pre-defined options for an <input> element.

loading

Used with: <img>

The loading Attribute specifies whether an image should be loaded immediately or delayed until it reaches a certain distance from the viewport.

loop

Used with: <audio> <video>

The loop Attribute is a boolean attribute that makes an audio or video track automatically start from the beginning once it reaches the end.

low

Used with: <meter>

The low Attribute is used with a <meter> element to specify a level under which the value is considered too low.

max

Used with: <input> <meter> <progress>

The max Attribute is used to specify a maximum value.

maxlength

Used with: <input> <textarea>

The maxlength Attribute specifies the maximum number of characters allowed.

media

Used with: <a> <area> <link> <source> <style>

The media Attribute specifies the media or device the target link is optimized for, such as mobile devices or print.

method

Used with: <form>

The method attribute specifies the HTTP method to use for form submission.

min

Used with: <input> <meter>

The min Attribute is used to specify a minimum value.

minlength

Used with: <input> <textarea>

The minlength Attribute specifies the minimum number of characters allowed.

multiple

Used with: <input> <select>

The multiple Attribute specifies that more than one value may be entered.

muted

Used with: <video> <audio>

The muted Attribute specifies whether to start the audio or video with no sound.

name

Used with: <button> <fieldset> <form> <iframe> <input> <map> <meta> <object> <output> <param> <select> <textarea>

The name Attribute specifies the name of the element. It is submitted to the server along with the value as part of the form data.

nomodule

Used with: <script>

The nomodule Attribute is a boolean that determines whether to execute the script in browsers that support ES2015 modules. This is used as a fallback to server alternative script should the browser not support modular JavaScript code.

novalidate

Used with: <form>

The novalidate Attribute is a boolean that indicates whether the form should not be validated on submission. If the attribute is omitted, then validation is undertaken.

open

Used with: <details>

The open Attribute is a boolean attribute, which, if present, indicates that both the summary and detail information should be shown to the user.

optimum

Used with: <meter>

The optimum Attribute specifies the optimum or good value of a <meter> element.

pattern

Used with: <input>

The pattern Attribute specifies a regular expression that the value of the <input> element will be validated against.

ping

Used with: <a> <area>

The ping Attribute can take a string of URLs, with a single space as the separator. When the link is clicked, a POST request will be sent to the URLs with the body ping.

placeholder

Used with: <input> <textarea>

The placeholder Attribute specifies an expected value or default text that will display inside a <input> or <textarea> element. When a user starts typing, the placeholder will disappear.

poster

Used with: <video>

The poster Attribute specifies an URL for an image to show while the video is downloading.

preload

Used with: <audio> <video>

The preload Attribute specifies whether the browser should preload the audio or video file.

readonly

Used with: <input> <textarea>

The readonly Attribute is a boolean that specifies that the <input> or <textarea> element is read-only.

rel

Used with: <a> <area> <form> <link>

The rel Attribute specifies the relationship between two documents.

required

Used with: <input> <select> <textarea>

The required Attribute is a boolean that specifies the form element is required to be completed prior to submission.

reversed

Used with: <ol>

The reversed Attribute is a boolean that specifies that the list items are in reverse order.

rows

Used with: <textarea>

The rows Attribute specifies the number of visible lines in the <text area> element.

rowspan

Used with: <td> <th>

The rowspan Attribute specifies the number of rows that the cell should span.

sandbox

Used with: <iframe>

The sandbox Attribute enables a range of restrictions for the content within an iframe. It can be empty for the full set of restrictions or be a space-separated list of pre-defined values that remove those particular restrictions.

scope

Used with: <th>

The scope Attribute specifies whether the header cell is a header for a column, row, group of rows, or groups of columns.

selected

Used with: <option>

The selected Attribute is a boolean that indicates whether the option is the default selected when the page loads.

shape

Used with: <area>

The shape Attribute details the shape of the hotspot areas of an area element.

size

Used with: <input> <select>

The size Attribute specifies the width of the element in characters.

sizes

Used with: <img> <link> <source>

The sizes Attribute specifies the image sizes between breakpoints. It is used in combination with a media condition.

span

Used with: <col> <colgroup>

The span Attribute specifies the number of columns that the <col> or <colgroup> element should span.

spellcheck

Used with: Global Attributes

The spellcheck Attribute specifies whether the element should have its spelling and grammar checked.

src

Used with: <audio> <embed> <iframe> <img> <input> <script> <source> <track> <video>

The src Attribute specifies the URL of an external resource.

srcdoc

Used with: <iframe>

The srcdoc Attribute specifies the HTML code or content to be embedded in the <iframe>.

srclang

Used with: <track>

The srclang Attribute specifies the language of the track’s text data. It is a required attribute when the kind attribute value is subtitles.

srcset

Used with: <img> <source>

The srcset Attribute specifies an URL to an image along with a width descriptor (positive integer followed by w), or a pixel density descriptor (a number followed by x). It determines the set of images the browser can choose from with each image being a different size. The width or density descriptor is based upon the image’s real size.