HTML Attributes

Attributes provide additional features or functionality to an HTML element. An element can have any number of attributes. Attributes are assigned to an element inside the element‘s opening tag.

HTML Reference

Example

A paragraph with 3 attributes: id, class, and style.

<p id='p1' class='color-teal' style='font-size:16px;'>
   Paragraph with three attributes.
</p>

Attribute Syntax

Attributes have two parts: a name and a value.

<element name1='value1' name2='value2'> ... </element>
  • <element> is the HTML element.
  • name1 and name2 are the attribute names.
  • value1 and value2 are the attribute values.
  • Attribute values are set between single quotes (') or double quotes (").
  • Examples include  id,  style,  class,  namehref,  etc.

Categories of Attributes

Regarding placement, HTML attributes fall into 3 categories:

  1.  Global Attributes -- these can be placed on all tags.
  2.  Multi-tag Attributes -- these can be placed on a limited number of tags.
  3.  Single-tag Attributes -- these can be placed on one specific tag.

Note: Irrespective the category, an attribute is always just a modifier to an element.


Global Attributes

A list with the global attributes that can be applied to any tag.

Attribute Description
  id Sets a unique identifier for the element.
  class Sets one or more CSS classes to be applied to the element.
  style Sets the style for the element.
  data-* Defines additional data that can be used by JavaScript.
  hidden Specifies whether the element is hidden.
  title Sets a title that displays as a tooltip when element is hovered.
  tabindex Sets a tab sequence number relative to the other elements.
  lang Sets the language for the element.
  draggable Specifies whether the element can be dragged.
  accesskey Sets a shortcut key for the element.
  inputmode Sets keyboard configuration for when editing the element.
  spellcheck Specifies whether to spellcheck the element.
  autocapitalize Specifies to capitalize the data entered.
  contenteditable Specifies whether the element is editable.
  dir Sets the display direction: left-to-right or right-to-left.
  is Specifies that element behaves like a registered custom element.

Note:  Sometimes global attributes have no meaning on certain tags. For example, placing a tabindex on a <meta> tag is pointless. In that case the attribute is ignored.


Multi-tag Attributes

Attributes that can be applied to a limited number of tags.

Attribute Elements Description
alt img
area
input
Sets alternative text for when an image cannot be loaded.
autocomplete input
select
textarea
form
Specifies whether browser can automatically autofill values for an input element.
autofocus input
select
textarea
button
Specifies that element gets focus once the page is loaded.
autoplay audio
video
Specifies that the media should play once the page is loaded.
cite q
blockquote
del
ins
Specifies a document that is a citation for a quotation or a text change.
colspan td
th
Sets the number of columns that the table cell should span.
controls audio
video
Specifies that audio/video controls are displayed.
crossorigin img
link
script
audio
video
Specifies how an element will handle crossorigin requests.
datetime time
del
ins
Specifies the date and time of the changed text or time element.
dirname input
textarea
Submits the direction (ltr or rtl) of the input or textarea field.
disabled input
select
textarea
button
option
optgroup
fieldset
Sets the element to disabled
download a
area
Specifies to download the target when the element is clicked
for label
output
Associates a label or output element with an input element.
form input
select
textarea
button
meter
output
object
fieldset
Specifies which form the element belongs to.
formaction button
input
Specifies where to process the element value(s) when submitted.
formenctype button
input
Specifies the encoding type during form submission.
formmethod button
input
Specifies the HTTP method (GET OR POST) to use during form submission.
formnovalidate button
input
Specifies that form controls are not validated when the form is submitted.
formtarget button
input
Specifies the tab or windows where to display the result.
headers td
th
Specifies which header cells the current cell is related to.
height img
input
canvas
svg
video
embed
iframe
object
Sets the height of the element.
href a
area
link
base
Specifies the URL of the target page.
hreflang a
area
link
Specifies the language of the target page.
label track
option
optgroup
Provides a title for a track or a shorter label for the text in the element.
loop audio
video
Specifies that the media repeat playing after it's finished.
max input
meter
progress
Sets the maximum value allowed for the element.
maxlength input
textarea
Sets the maximum character length for the element.
media a
area
link
style
source
Sets the optimal media or device for the target document.
min input
meter
Sets the minimum value for the element.
multiple input
select
Specifies that the element can select multiple files or items.
muted audio
video
Specifies the audio output of the media is muted, i.e. no sound.
name input
select
textarea
button
iframe
map
meta
output
fieldset
object
param
Sets the name of the element. Used as reference for Javascript, CSS, or form-data.
placeholder input
textarea
Sets the placeholder text that shows while no data has been entered yet.
preload audio
video
Specifies if and how a media file is preloaded.
readonly input
textarea
Specifies that a control is read-only.
rel a
area
link
form
Sets relationship between the current page and the target page.
required input
select
textarea
Specifies that the element requires a value before submission.
rowspan td
th
Sets the number of rows that the table cell spans.
size input
select
Sets the number of visible characters in an input control, or the number of visible items in a select control.
sizes img
link
source
Sets the size of an element depending on a set of media conditions.
span col
colgroup
Sets the number of columns the element should span.
src img
script
iframe
audio
video
embed
input
source
track
Specifies the source (URL) of the element.
srcset img
source
Specifies a number of sources (URLs) of the element. The browser uses the 'best' one.
target a
area
form
base
Specifies the tab or windows where to display the result.
type input
button
link
style
a
ol
script
source
embed
object
Specifies a type detail or refinement of the underlying element.
usemap img
object
Binds the element to a map with clickable areas.
value input
button
option
data
li
meter
progress
param
Sets the value for the element.
width img
input
canvas
svg
video
embed
iframe
object
Sets the width of the element.

Single-tag Attributes

Single-tag attributes that can be applied to one tag only.

Attribute Element Description
abbr th Creates an abbreviated version of the header text. Used by screenreaders.
accept input Specifies acceptable file types that can be selected from a file dialog.
accept-charset form Sets the character encoding to use when submitting the form.
action form Specifies the url of where to submit a form.
async script Specifies that the script is executed when page is still loading.
charset meta Specifies to the browser what character set to use for the page.
checked input Specifies that the checkbox or radio button is checked (turned on).
cols textarea Defines the width of a textarea by setting the number of visible characters.
content meta Sets the value of the meta tag. Used with name and http-equiv properties.
coords area Defines the coordinates for a clickable map area.
data object Specifies the source (URL) of the object.
default track Sets the default track to use if no other preferences are specified.
defer script Specifies to wait executing the script file until the page has been loaded.
enctype form Specifies the form data is encoded according to a given encoding type.
high meter Sets the high end of the range in a meter control.
http-equiv meta Specifies which HTTP header value to set in the meta tag.
ismap img Specifies that the image click coordinates are sent to the server.
kind track Specifies the type of track, such as captions, subtitles, chapters, etc.
list input Specifies a list of suggested values that will appear in a dropdown form.
low meter Sets the low end of the range in a gauge control.
method form Specifies the HTTP method (GET OR POST) to use when submitting the form.
novalidate form Specifies that form controls are not validated when the form is submitted.
open details Specifies whether the element is open and its contents is visible to the user.
optimum meter Sets the optimum value in the range of a gauge control
pattern input Specifies a regular expression that is validated when form is submitted.
ping a Specifies a space separated list of 'pingable' URLS.
poster video Specifies an image to display while video is loading or not playing yet.
reversed ol Reverses the display order of the ordered list.
rows textarea Set the height of the textarea by specifying the number of visible rows.
sandbox iframe Specifies a list of permissions for framed content.
scope th Specifies where in a table the header applies. Used by screen readers.
selected option Sets the dropdown item that is selected (highlighted).
shape area Used with the coords attribute to define the shape of an area.
srcdoc iframe Specifies an HTML source of the framed content.
srclang track Specifies the source language of the track's text data.
start ol Sets the first value in a numeric ordered list.
step input Sets the step size for input types: number, date, week, range and others.
wrap textarea Specifies how the text in a textarea is wrapped when submitted.

You may also like

Guides