Attributes

Attributes can be applied to HTML tags to change their behavior. An attribute as 2 parts:

  1. The attribute name
  2. The attribute value

Attributes are specified within the start tag as follows:

ATTR_NAME='ATTR_VAL'

The attribute name cannot have spaces and must be one word (underscore _ allowed). Attribute value should be quoted (single or double quotes -- this is optional but it is best practice to use quotes) and can include spaces.

A HTML tag can have any number of attributes (or none at all). The attribute-value pairs are seperated from each other by a white-space (one or more spaces). 

<TAG_NAME ATTR_NAME1='ATTR_VAL1' ATTR_NAME2="ATTR_VAL2">

      content

</TAG_NAME>

Uses of Attributes

Attributes have 4 uses:

  1. To modify the behavior of a HTML tag: Conside the anchor <a> tag, which is used to cross reference HTML pages. The href attribute specifies the html page to navigate to when clicked.
  <a href='http://google.com'> Go to Google </a>

Go to Google

In order to open the page in a seperate tab speicy the target attribute and set it to _blank.

  <a href='http://google.com' target="_blank"> Go to Google </a>

Go to Google

Next let us look at the <img> tag. The src attribute specifies which image should be rendered within the <img> tag. For example:

  <img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'>

will render the Google logo. We can also specify the height and width of the image (in pixels) by using the height and width attributes, like so:

  <img height='100' width='200' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'>

  • If you want to maintain the aspect-ratio of the image specify only one of the two (height/width) attributes.

  • It is best to use CSS to speicfy these properties, more on this later.

  1. To add CSS styling to the tag: A special attribute called style can be use to specify CSS declaration for a tag. This is one of the many ways CSS can be added to a tag. This will be discussed in detail in the CSS section.

  2. To identify and group tags: An attribute called id can be used to assign an unique identifier to a tag. This identifier can be used only for one tag and a tag can have only one id. A tag can be categorized into a group by the class attribute. A tag can have more than one class. These class names are delimted by white spaces.

  <div id="testID" class='class1 class2 class3'> </div>
  1. To attach event listeners to tags:

Events are actions done by the user on a tag like clicking, mouse hover etc. An event handler is JavaScript that needs to execute when the event occurs. The following markup will pop up a message (100) when the button is cliked.

  <button onclick="alert(100)"> Click me! </button>

The event model will be discussed in more detail in the JavaScript section.

The next section lists all HTML attributes that can be used with different html tags.

Attribute Reference

Taken from MDN web docs. Please contribute if you can.

The following table lists the defined attributes of the HTML standard. A global attribute can be used with any tag, whereas most attributes have certain tags with which they are most commonly used.

Attribute Name Description
accept List of types the server accepts, typically a file type.
accept-charset List of supported charsets.
accesskey Keyboard shortcut to activate or add focus to the element.
action The URI of a program that processes the information submitted via the form.
align Specifies the horizontal alignment of the element.
allow Specifies a feature-policy for the iframe.
alt Alternative text in case an image can't be displayed.
async Executes the script asynchronously.
autocapitalize Sets whether input is automatically capitalized when entered by user
autocomplete Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus The element should be automatically focused after the page loaded.
autoplay The audio or video should play as soon as possible.
background Specifies the URL of an image file.
bgcolor

Background color of the element.
border

The border width.
buffered Contains the time range of already buffered media.
capture From the HTML Media Capture
The definition of 'media capture' in that specification.spec, specifies a new file can be captured.
challenge A challenge string that is submitted along with the public key.
charset Declares the character encoding of the page or script.
checked Indicates whether the element should be checked on page load.
cite Contains a URI which points to the source of the quote or change.
class Often used with CSS to style elements with common properties.
code Specifies the URL of the applet's class file to be loaded and executed.
codebase This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.
color

This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.
cols Defines the number of columns in a textarea.
colspan The colspan attribute defines the number of columns a cell should span.
content A value associated with http-equiv or name depending on the context.
contenteditable Indicates whether the element's content is editable.
contextmenu Defines the ID of a ><menu> element which will serve as the element's context menu.
controls Indicates whether the browser should show playback controls to the user.
coords A set of values specifying the coordinates of the hot-spot region.
crossorigin How the element handles cross-origin requests
csp  Specifies the Content Security Policy that an embedded document must agree to enforce upon itself.
data Specifies the URL of the resource.
data-* Lets you attach custom attributes to an HTML element.
datetime Indicates the date and time associated with the element.
decoding Indicates the preferred method to decode the image.
default Indicates that the track should be enabled unless the user's preferences indicate something different.
defer Indicates that the script should be executed after the page has been parsed.
dir Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
dirname
disabled Indicates whether the user can interact with the element.
download Indicates that the hyperlink is to be used for downloading a resource.
draggable Defines whether the element can be dragged.
dropzone Indicates that the element accept the dropping of content on it.
enctype Defines the content type of the form date when the method is POST.
enterkeyhint The enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards. The attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute).
for Describes elements which belongs to this one.
form Indicates the form that is the owner of the element.
formaction Indicates the action of the element, overriding the action defined in the <form>.
formenctype If the button/input is a submit button (type="submit"), this attribute sets the encoding type to use during form submission. If this attribute is specified, it overrides the enctype attribute of the button's form owner.
formmethod If the button/input is a submit button (type="submit"), this attribute sets the submission method to use during form submission (GET, POST, etc.). If this attribute is specified, it overrides the method attribute of the button's form owner.
formnovalidate If the button/input is a submit button (type="submit"), this boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the button's form owner.
formtarget If the button/input is a submit button (type="submit"), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received after submitting the form. If this attribute is specified, it overrides the target attribute of the button's form owner.
headers IDs of the <th> elements which applies to this element.
height

Specifies the height of elements listed here. For all other elements, use the CSS >height property.
hidden Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
high Indicates the lower bound of the upper range.
href The URL of a linked resource.
hreflang Specifies the language of the linked resource.
http-equiv Defines a pragma directive.
icon Specifies a picture which represents the command.
id Often used with CSS to style a specific element. The value of this attribute must be unique.
importance  Indicates the relative fetch priority for the resource.
integrity

Specifies a Subresource Integrity value that allows browsers to verify what they fetch.
intrinsicsize  This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute.
inputmode Provides a hint as to the type of data that might be entered by the user while editing the element or its contents. The attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute).
ismap Indicates that the image is part of a server-side image map.
itemprop
keytype Specifies the type of key generated.
kind Specifies the kind of text track.
label Specifies a user-readable title of the element.
lang Defines the language used in the element.
language Defines the script language used in the element.
loading  Indicates if the element should be loaded lazily (loading="lazy") or loaded immediately (loading="eager").
list Identifies a list of pre-defined options to suggest to the user.
loop Indicates whether the media should start playing from the start when it's finished.
low Indicates the upper bound of the lower range.
manifest Specifies the URL of the document's cache manifest.
max Indicates the maximum value allowed.
maxlength Defines the maximum number of characters allowed in the element.
minlength Defines the minimum number of characters allowed in the element.
media Specifies a hint of the media for which the linked resource was designed.
method Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min Indicates the minimum value allowed.
multiple Indicates whether multiple values can be entered in an input of the type email or file.
muted Indicates whether the audio will be initially silenced on page load.
name Name of the element. For example used by the server to identify the fields in form submits.
novalidate This attribute indicates that the form shouldn't be validated when submitted.
open Indicates whether the details will be shown on page load.
optimum Indicates the optimal numeric value.
pattern Defines a regular expression which the element's value will be validated against.
ping The ping attribute specifies a space-separated list of URLs to be notified if a user follows the hyperlink.
placeholder Provides a hint to the user of what can be entered in the field.
poster A URL indicating a poster frame to show until the user plays or seeks.
preload Indicates whether the whole resource, parts of it or nothing should be preloaded.
radiogroup
readonly Indicates whether the element can be edited.
referrerpolicy Specifies which referrer is sent when fetching the resource.
rel Specifies the relationship of the target object to the link object.
required Indicates whether this element is required to fill out or not.
reversed Indicates whether the list should be displayed in a descending order instead of a ascending.
rows Defines the number of rows in a text area.
rowspan Defines the number of rows a table cell should span over.
sandbox Stops a document loaded in an iframe from using certain features (such as submitting forms or opening new windows).
scope Defines the cells that the header test (defined in the th element) relates to.
scoped
selected Defines a value which will be selected on page load.
shape
size Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
sizes
slot Assigns a slot in a shadow DOM shadow tree to an element.
span
spellcheck Indicates whether spell checking is allowed for the element.
src The URL of the embeddable content.
srcdoc
srclang
srcset One or more responsive image candidates.
start Defines the first number if other than 1.
step
style Defines CSS styles which will override styles previously set.
summary
tabindex Overrides the browser's default tab order and follows the one specified instead.
target
title Text to be displayed in a tooltip when hovering over the element.
translate Specify whether an element’s attribute values and the values of its text.
type Defines the type of the element.
usemap
value Defines a default value which will be displayed in the element on page load.
width

Establishes the element's width.
wrap Indicates whether the text should be wrapped.

Boolean Attributes

Some content attributes (e.g. required, readonly, disabled) are called boolean attributes. If a boolean attribute is present, its value is true, and if it’s absent, its value is false.

HTML5 defines restrictions on the allowed values of boolean attributes: If the attribute is present, its value must either be the empty string (equivalently, the attribute may have an unassigned value), or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace. The following examples are valid ways to mark up a boolean attribute:

<div itemscope> This is valid HTML but invalid XML. </div>
<div itemscope=itemscope> This is also valid HTML but invalid XML. </div>
<div itemscope=""> This is valid HTML and also valid XML. </div>
<div itemscope="itemscope"> This is also valid HTML and XML, but perhaps a bit verbose. </div>

To be clear, the values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether. This restriction clears up some common misunderstandings: With checked="false" for example, the element’s checked attribute would be interpreted as true because the attribute is present.