HTML Tutorial

HTML Attributes

HTML Attributes provides more information to the HTML element in which it is declared.

<body bgcolor="#000"></body>
This is an HTML attribute

An attribute usually comes with a value, this value defines the function needed from the attribute.

We also have some attributes that do not require a value. You will learn about those attributes in later chapters.

Features of an HTML Attribute

  • Attributes provide more information and definition to an HTML element.
  • Attributes are declared in the start tag only.
  • Attributes come with values, but there are also some attributes that do not require a value.

Procedures for Declaring an Attribute

  • Provide the name of the attribute,
  • followed by an operator sign(=) and a quote(" or '),
  • then declare the value needed and another quote(" or ') to embrace the value.

See Examples

<html lang="en-US"></html> <!-- Sets the language type of an HTML document to the US - English. -->
<body width="700"></body> <!-- Sets the width of a webpage body to 700px -->
<input type="text" /> <!-- Creates a text input field. -->
  Do It Yourself
Please note that not all attributes works for all elements. We have some attributes that are specified for certain elements only.

Global HTML Attributes

Global HTML attributes are attributes that can be used on all HTML elements. These attributes perform functions that are common to all HTML elements, although they might not have an effect on all. All HTML elements must allow these global attributes, even the custom-defined elements (elements not specified in the HTML standard).

The HTML Global attributes are grouped as follows:

Group Attributes Description
data-* attributes data-foo, data-baz, data-bar The data-* global attributes are a kind of custom global attributes that allows a developer to store extra information on the standard, semantic HTML elements by using custom-defined names, prefixed with data- keyword and can be easily accessed.
Event handler attributes onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting These are attributes used to trigger events on a web page.
Other global attributes   Other global attributes will be explained in this table below.

ARIA Attributes

Accessible Rich Internet Applications makes web applications to be easily accessible to the people with disabilities by providing sets of attributes which are prefixed with aria-.

List of All ARIA Attributes and Descriptions

List of ARIA attributes and their descriptions as specified on the W3C website.

Attribute Description Value or Data Type
aria-activedescendant Identifies the currently active descendant of a composite widget. This is used to the assistive technology about the active child which has focus. More on this later. The ID of the currently active child object
aria-atomic Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. "true" | "false" default
aria-autocomplete Indicates whether user input completion suggestions are provided. "both" | "inline" | "list" | "none" default
aria-busy (state) Indicates whether an element, and its subtree, are currently being updated. "true" | "false" default
aria-checked (state) Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. See related aria-pressed and aria-selected.

"false" | "mixed" | "true" | "undefined" default
aria-controls Identifies the element (or elements) whose contents or presence are controlled by the current element. See related aria-owns. A list of one or more ID references.
aria-describedat Specifies a URI referencing content that describes the object. See related aria-describedby. A URI (Uniform resource identifier)
aria-describedby Identifies the element (or elements) that describes the object. A list of one or more ID references.
aria-disabled Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. "true" | "false"  default
aria-dropeffect Indicates what functions can be performed when the dragged object is released on the drop target.

"copy" | "execute" | "link" | "move" | "none" default | "popup"
aria-expanded Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

"true"  | "false" | "undefined" default
aria-flowto Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

A list of one or more ID references.
aria-grabbed Indicates an element's "grabbed" state in a drag-and-drop operation.

"true" | "false" | "undefined"  default 
aria-haspopup Indicates that the element has a popup context menu or sub-level menu.

"true" | "false" default
aria-hidden Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.

"true" | "false" default
aria-invalid Indicates the entered value does not conform to the format expected by the application.

"grammar" | "false" default  | "spelling" | "true"
aria-label Defines a string value that labels the current element.

string  - any text defined by the developer
aria-labelledby Identifies the element (or elements) that labels the current element.

A list of one or more ID references.
aria-level Defines the hierarchical level of an element within a structure.

integer  - A numerical value without a fractional component.
aria-live Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

"assertive" | "off" default  | "polite"
aria-multiline Indicates whether a text box accepts multiple lines of input or only a single line. "true" | "false" default
aria-multiselectable Indicates that the user may select more than one item from the current selectable descendants.

"true" | "false" default
aria-orientation Indicates whether the element and orientation is horizontal or vertical.

"horizontal" default | "vertical"
aria-owns Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

A list of one or more ID references.
aria-posinset Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

A numerical value without a fractional component.
aria-pressed Indicates the current "pressed" state of toggle buttons. "false" | "mixed" | "true" | "undefined" default
aria-readonly Indicates that the element is not editable, but is otherwise operable.

"true" | "false" default
aria-relevant Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will receive within a live region. "additions" | "additions text" default | "all" | "removals" | "text"
aria-required Indicates that user input is required on the element before a form may be submitted.

 "true" | "false" default
aria-selected Indicates the current "selected" state of various widgets.

 "true" | "false" | "undefined" default
aria-setsize Defines the number of items in the current set of listitems or treeitems.

A numerical value without a fractional component. 
aria-sort Indicates if items in a table or grid are sorted in ascending or descending order.

"ascending" | "descending" | "none" default | "other"
aria-valuemax Defines the maximum allowed value for a range widget.

 Any real numerical value.
aria-valuemin Defines the minimum allowed value for a range widget.

 Any real numerical value.
aria-valuenow Defines the current value for a range widget.

 Any real numerical value.
aria-valuetext Defines the human readable text alternative of aria-valuenow for a range widget.

Unconstrained value type. String: Any kind of characters.

Lists of HTML Attributes and Descriptions

Attributes HTML Elements Description
hidden Global attribute Prevents rendering of a given element, while keeping child elements, e.g. script elements, active.
high <meter> Indicates the lower bound of the upper range.
href <a>, <area>, <base>, <link>  The URL of a linked resource.
hreflang <a>, <area>, <link> Specifies the language of the linked resource.
http-equiv <meta>  
icon <command> Specifies a picture that represents the command.
id Global attribute Often used with CSS to style a specific element. The value of this attribute must be unique.
ismap <img> Indicates that the image is part of a server-side image map.
itemprop Global attribute  
keytype <keygen> Specifies the type of key generated.
kind <track> Specifies the kind of text track.
label <track> Specifies a user-readable title of the text track.
lang Global attribute Defines the language used in the element.
language <script> Defines the script language used in the element.
list <input> Identifies a list of pre-defined options to suggest to the user.
loop <audio>, <bgsound>, <marquee>, <video> Indicates whether the media should start playing from the start when it's finished.
low <meter> Indicates the upper bound of the lower range.
manifest <html> Specifies the URL of the document's cache manifest.
max <input>, <meter>, <progress> Indicates the maximum value allowed.
maxlength <input>, <textarea> Defines the maximum number of characters allowed in the element.
media <a>, <area>, <link>, <source>, <style> Specifies a hint of the media for which the linked resource was designed.
method <form> Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min <input>, <meter> Indicates the minimum value allowed.
multiple <input>, <select> Indicates whether multiple values can be entered in an input of the type email or file.
name <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> Name of the element. For example, used by the server to identify the fields in form submits.
nofollow <a>, <link> Introduced by Google to mark links that are advertisements or paid. This prevents crawlers from following the links.
novalidate <form> This attribute indicates that the form shouldn't be validated when submitted.
open <details> Indicates whether the details will be shown on page load.
optimum <meter> Indicates the optimal numeric value.
pattern <input> Defines a regular expression in which the element's value will be validated against.
ping <a>, <area>  
placeholder <input>, <textarea> Provides a hint to the user of what can be entered in the field.
poster <video> A URL indicating a poster frame to show until the user plays or seeks.
preload <audio>, <video> Indicates whether the whole resource, parts of it, or nothing should be preloaded.
pubdate <time> Indicates whether this date and time is the date of the nearest <article> ancestor element.
radiogroup <command>  
readonly <input>, <textarea> Indicates whether the element can be edited.
rel <a>, <area>, <link> Specifies the relationship of the target object to the link object.
required <input>, <select>, <textarea> Indicates whether this element is required to fill out or not.
reversed <ol> Indicates whether the list should be displayed in descending order instead of ascending.
rows <textarea> Defines the number of rows in a textarea.
rowspan <td>, <th> Defines the number of rows a table cell should span over.
sandbox <iframe> This is used to apply some restrictions to the content in an <iframe> for security purposes.
spellcheck Global attribute Indicates whether spell checking is allowed for the element.
scope <th>  
scoped <style>  
seamless <iframe> Used to tell the browser to make an <iframe> as same as the containing document. Removed in HTML.
selected <option> Defines a value which will be selected on page load.
shape <a>, <area>  
size <input>, <select> 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 <link>  
span <col>, <colgroup>  
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> The URL of the embedded content.
srcdoc <iframe>  
srclang <track>  
srcset <img>  
start <ol> Defines the first number if other than 1.
step <input>  
style Global attribute Defines CSS styles which will override styles previously set.
summary <table>  
tabindex Global attribute Overrides the browser's default tab order and follow the one specified instead.
target <a>, <area>, <base>, <form>  
title Global attribute Text to be displayed in a tooltip when hovering over the element.
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> Defines the type of the element.
usemap <img>,  <input>, <object>  
value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> Defines a default value that will be displayed in the element on page load.
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Note: In some instances, such as <div>, this is a legacy attribute, in which case the CSS width property should be used instead. In other cases, such as <canvas>, the width must be specified with this attribute.
wrap <textarea> Indicates whether the text should be wrapped.
border <img>, <object>, <table>

The border width.

Note: This is a legacy attribute. Please use the CSS border property instead.
buffered <audio>, <video> Contains the time range of already buffered media.
challenge <keygen> A challenge string that is submitted along with the public key.
charset <meta>, <script> Declares the character encoding of the page or script.
checked <command>, <input> Indicates whether the element should be checked on page load.
cite <blockquote>, <del>, <ins>, <q> Contains a URI which points to the source of the quote or change.
class Global attribute Often used with CSS to style elements with common properties.
code <applet> Specifies the URL of the applet's class file to be loaded and executed.
codebase <applet> This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.
color <basefont>, <font>, <hr>

This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.

Note: This is a legacy attribute. Please use the CSS color property instead.
cols <textarea> Defines the number of columns in a textarea.
colspan <td>, <th> The colspan attribute defines the number of columns a cell should span.
content <meta> A value associated with http-equiv or name depending on the context.
contenteditable Global attribute Indicates whether the element's content is editable.
contextmenu Global attribute Defines the ID of a <menu> element which will serve as the element's context menu.
controls <audio>, <video> Indicates whether the browser should show playback controls to the user.
coords <area> A set of values specifying the coordinates of the hot-spot region.

data

<object>

Specifies the URL of the resource.

data-*

Global attribute

Lets you attach custom attributes to an HTML element.
datetime <del>, <ins>, <time> Indicates the date and time associated with the element.
default <track> This indicates that the track should be enabled unless the user's preferences indicate something different.
defer <script> This indicates that the script should be executed after the page has been parsed.
dir Global attribute Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
dirname <input>, <textarea>  
disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Indicates whether the user can interact with the element.
download <a>, <area> Indicates that the hyperlink is to be used for downloading a resource.
draggable Global attribute Defines whether the element can be dragged.
dropzone Global attribute Indicates that the element accepts the dropping of content on it.
enctype <form> Defines the content type of the form data when the method is POST.
for <label>, <output> Describes elements that belong to this one.
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indicates the form that is the owner of the element.
formaction <input>, <button> Indicates the action of the element, overriding the action defined in the <form>.
headers <td>, <th> IDs of the <th> elements that apply to this element.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Note: In some instances, such as <div>, this is a legacy attribute, in which case the CSS height property should be used instead. In other cases, such as <canvas>, the height must be specified with this attribute.
accept <form>, <input> List of types the server accepts, typically a file type.
accept-charset <form> List of supported charsets.
accesskey Global attribute Defines a keyboard shortcut to activate or add focus to the element.
action <form> The URI of a program that processes the information submitted via the form.
align <applet>, <caption>, <col>, <colgroup>,  <hr>, <iframe>, <img>, <table>, <tbody>,  <td>,  <tfoot> , <th>, <thead>, <tr> Specifies the horizontal alignment of the element.
alt

<applet>, <area>, <img>, <input>

 Alternative text in case an image can't be displayed.
async <script> This indicates that the script should be executed asynchronously.
autocomplete <form>, <input> Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus <button>, <input>, <keygen>, <select>, <textarea> The element should be automatically focused after the page loaded.
autoplay <audio>, <video> The audio or video should play as soon as possible.
autosave <input> Previous values should persist dropdowns of values that can be selected across page loads.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> bgcolor attribute sets the background color of an element, this attribute is only applicable to a few elements.

  Do It Yourself See Examples

What You Should Know at the End of This Lesson

  • Know what the HTML attribute is.
  • Determine the width and height of a web page body using attributes.
  • Teach someone else what HTML attribute is.
Previous Chapter Next Chapter