HTML Tag Attributes

HTML Tag Attributes are modifiers for the HTML tags and they provide additional information. In most cases they are defined in name="value" pairs and they are always declared in the opening tag.

<tagname attributename="value" attibute2="othervalue" attribute3>
  Some content
</tagname>

Examples

HTML images set the source of the image file, a short description and the size (width and height) through attributes:

<img src="rubiks-cube.jpg" width="200" height="200" alt="Rubik's Cube" />

Clickable link anchors set the reference through the href attribute, while the target="_blank" forces the link to open in new browser tab.

<a href="https://ruwix.com/" target="_blank">Rubik's Cube</a>

Class and ID attributes

Any tag can have unlimited class and id attributes. They are used for styling the elements or to target them through a script (we'll talk about scripting later).

The example below has two classes and one identifier.

<div class="big clearfix" id="bigBox3">
  Some content
</div>

The data-* attribute

Some attributes can be used for any tag (class, id) while some attributes belong to certain tags. For example the href link attribute can't be used for the img tag.

You have the possibility to declare any attribute using the data- prefix. This might come handy later for scripting (we'll later about that).

<ul>
  <li data-pos="1">HTML</li>
  <li data-pos="2">CSS</li>
  <li data-pos="3">JavaScript</li>
</ul>

Style

Sets an inline style that overwrites the default CSS design.

<p style="font-size: 1.2em; text-align: center;">
  The text is <span style="text-decoration: underline;">bigger</span> in this paragraph.
</p>

The text is bigger in this paragraph.

All HTML attributes

The table below lists and explains all attributes and specifies to which tag they belong.

Attribute Belongs to tag Explanation
accept input Sets what types of files that the server accepts (only for type="file")
accept-charset form Sets the character encodings that are to be used for the form submission
accesskey Global attribute Sets a shortcut key to activate/focus an element
action form Sets where to send the form-data when the form is submitted
align Obsolete! Sets the alignment according to surrounding elements. Obsolete attribute, use CSS instead
alt area, img, input Sets an alternate text when the original element fails to display
async script Sets that the script is executed asynchronously (only for external scripts)
autocomplete form, input Sets whether the form or the input element should have autocomplete enabled
autofocus button, input, select, textarea Sets that the element should automatically get focus when the page loads
autoplay audio, video Sets that the audio/video will start playing as soon as it is ready
bgcolor Obsolete! Sets the background color of an element. Use CSS instead
border Obsolete! Sets the width of the border of an element. Use CSS instead
charset meta, script Sets the character encoding
checked input Sets that an input element should be pre-selected when the page loads (for type="checkbox" or type="radio")
cite blockquote, del, ins, q Sets a URL which explains the quote/deleted/inserted text
class Global attribute Sets one or more classnames for an element (refers to a class in a style sheet)
color Obsolete! Sets the text color of an element. Use CSS instead
cols textarea Sets the visible width of a text area
colspan td, th Sets the number of columns a table cell should span
content meta Gives the value associated with the http-equiv or name attribute
contenteditable Global attribute Sets whether the content of an element is editable or not
contextmenu Global attribute Sets a context menu for an element. The context menu appears when a user right-clicks on the element
controls audio, video Sets that audio/video controls should be displayed (such as a play/pause button etc)
coords area Sets the coordinates of the area
data object Sets the URL of the resource to be used by the object
data-* Global attribute Used to store custom data private to the page or application
datetime del, ins, time Sets the date and time
default track Sets that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate
defer script Sets that the script is executed when the page has finished parsing (only for external scripts)
dir Global attribute Sets the text direction for the content in an element
dirname input, textarea Sets that the text direction will be submitted
disabled button, fieldset, input, optgroup, option, select, textarea Sets that the specified element/group of elements should be disabled
download a, area Sets that the target will be downloaded when a user clicks on the hyperlink
draggable Global attribute Sets whether an element is draggable or not
dropzone Global attribute Sets whether the dragged data is copied, moved, or linked, when dropped
enctype form Sets how the form-data should be encoded when submitting it to the server (only for method="post")
for label, output Sets which form element(s) a label/calculation is bound to
form button, fieldset, input, label, meter, object, output, select, textarea Sets the name of the form the element belongs to
formaction button, input Sets where to send the form-data when a form is submitted. Only for type="submit"
headers td, th Sets one or more headers cells a cell is related to
height canvas, embed, iframe, img, input, object, video Sets the height of the element
hidden Global attribute Sets that an element is not yet, or is no longer, relevant
high meter Sets the range that is considered to be a high value
href a, area, base, link Sets the URL of the page the link goes to
hreflang a, area, link Sets the language of the linked document
http-equiv meta Provides an HTTP header for the information/value of the content attribute
id Global attribute Sets a unique id for an element
ismap img Sets an image as a server-side image-map
kind track Sets the kind of text track
label track, option, optgroup Sets the title of the text track
lang Global attribute Sets 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 Sets that the audio/video will start over again, every time it is finished
low meter Sets the range that is considered to be a low value
max input, meter, progress Sets the maximum value
maxlength input, textarea Sets the maximum number of characters allowed in an element
media a, area, link, source, style Sets what media/device the linked document is optimized for
method form Sets the HTTP method to use when sending form-data
min input, meter Sets a minimum value
multiple input, select Sets that a user can enter more than one value
muted video, audio Sets that the audio output of the video should be muted
name button, fieldset, form, iframe, input, map, meta, object, output, param, select, textarea Sets the name of the element
novalidate form Sets 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 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 Visible elements Script to be run when the value of the element is changed
onclick Visible elements Script to be run when the element is being clicked
oncontextmenu Visible elements Script to be run when a context menu is triggered
oncopy 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 track element
oncut Visible elements Script to be run when the content of the element is being cut
ondblclick Visible elements Script to be run when the element is being double-clicked
ondrag Visible elements Script to be run when the element is being dragged
ondragend Visible elements Script to be run at the end of a drag operation
ondragenter Visible elements Script to be run when an element has been dragged to a valid drop target
ondragleave Visible elements Script to be run when an element leaves a valid drop target
ondragover Visible elements Script to be run when an element is being dragged over a valid drop target
ondragstart Visible elements Script to be run at the start of a drag operation
ondrop 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 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 Visible elements Script to be run when the element gets user input
oninvalid Visible elements Script to be run when the element is invalid
onkeydown Visible elements Script to be run when a user is pressing a key
onkeypress Visible elements Script to be run when a user presses a key
onkeyup 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 Visible elements Script to be run when a mouse button is pressed down on an element
onmousemove Visible elements Script to be run as long as the mouse pointer is moving over an element
onmouseout Visible elements Script to be run when a mouse pointer moves out of an element
onmouseover Visible elements Script to be run when a mouse pointer moves over an element
onmouseup Visible elements Script to be run when a mouse button is released over an element
onmousewheel 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 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 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 Visible elements Script to be run when the element gets selected
onshow menu Script to be run when a menu element is shown as a context menu
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 of a video/audio has been changed
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 Visible elements Script to be run when the mouse wheel rolls up or down over an element
open details Sets that the details should be visible (open) to the user
optimum meter Sets what value is the optimal value for the gauge
pattern input Sets a regular expression that an input element's value is checked against
placeholder input, textarea Sets a short hint that describes the expected value of the element
poster video Sets an image to be shown while the video is downloading, or until the user hits the play button
preload audio, video Sets if and how the author thinks the audio/video should be loaded when the page loads
readonly input, textarea Sets that the element is read-only
rel a, area, link Sets the relationship between the current document and the linked document
required input, select, textarea Sets that the element must be filled out before submitting the form
reversed ol Sets that the list order should be descending (9,8,7...)
rows textarea Sets the visible number of lines in a text area
rowspan td, th Sets 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 Sets whether a header cell is a header for a column, row, or group of columns or rows
scoped style Sets that the styles only apply to this element's parent element and that element's child elements
selected option Sets that an option should be pre-selected when the page loads
shape area Sets the shape of the area
size input, select Sets the width, in characters (for input) or specifies the number of visible options (for select)
sizes img, link, source Sets the size of the linked resource
span col, colgroup Sets the number of columns to span
spellcheck Global attribute Sets whether the element is to have its spelling and grammar checked or not
src audio, embed, iframe, img, input, script, source, track, video Sets the URL of the media file
srcdoc iframe Sets the HTML content of the page to show in the iframe
srclang track Sets the language of the track text data (required if kind="subtitles")
srcset img, source Sets the URL of the image to use in different situations
start ol Sets the start value of an ordered list
step input Sets the legal number intervals for an input field
style Global attribute Sets an inline CSS style for an element
tabindex Global attribute Sets the tabbing order of an element
target a, area, base, form Sets the target for where to open the linked document or where to submit the form
title Global attribute Sets extra information about an element
translate Global attribute Sets whether the content of an element should be translated or not
type button, embed, input, link, menu, object, script, source, style Sets the type of element
usemap img, object Sets an image as a client-side image-map
value button, input, li, option, meter, progress, param Sets the value of the element
width canvas, embed, iframe, img, input, object, video Sets the width of the element
wrap textarea Sets how the text in a text area is to be wrapped when submitted in a form
➤