HTML attribute
HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to an HTML start tag.
Several basic attributes types have been recognized, including: required attributes, needed by a particular element type for that element type to function correctly; optional attributes, used to modify the default functionality of an element type; standard attributes, supported by many element types; and event attributes, used to cause element types to specify scripts to be run under specific circumstances.
Some attribute types function differently when used to modify different element types. For example, the attribute name is used by several element types, but has slightly different functions in each.
Description
HTML attributes generally appear as name-value pairs, separated by=
, and are written within the start tag of an element, after the element's name:Where
element
names the HTML element type, and attribute
is the name of the attribute, set to the provided value
. The value may be enclosed in single or double quotes, although values consisting of certain characters can be left unquoted in HTML. Leaving attribute values unquoted is considered unsafe.Although most attributes are provided as paired names and values, some affect the element simply by their presence in the start tag of the element.
The abbreviation element,
abbr
, can be used to demonstrate these various attributes:This example displays as HTML in blue without being a link, and in most browsers, pointing the cursor at the abbreviation should display the title text "Hypertext Markup Language" within a floating yellow background.
Centered text
In this other example, your text will look like this:
Centered text
Most elements also take the language-related attributes
lang
and dir
.Common attributes
Usually, HTML elements can take any of several most common standard attributes :- The
id
attribute provides a document-wide unique identifier for an element. This can be used as CSS selector to provide presentational properties, by browsers to focus attention on the specific element, or by scripts to alter the contents or presentation of an element. Appended to the URL of the page, the URL directly targets the specific element within the document, typically a sub-section of the page. For example, the ID "Attributes" in
.http://en.wikipedia.org/wiki/HTML#Attributes - The
class
attribute provides a way of classifying similar elements. This can be used for semantic purposes, or for presentation purposes. Semantically, for example, classes are used in microformats. Presentationally, for example, an HTML document might use the designationclass="notation"
to indicate that all elements with this class value are subordinate to the main text of the document. Such elements might be gathered together and presented as footnotes on a page instead of appearing in the place where they occur in the HTML source. Another presentation use would be as a CSS selector. - An author may use the
style
non-attributal codes presentational properties to a particular element.Thestyle
attribute can be used on any HTML element. It is considered better practice to use an element'sid
orclass
attributes to select the element with a stylesheet, though sometimes this can be too cumbersome for a simple and specific or ad hoc application of styled properties. - The
title
attribute is used to attach subtextual explanation to an element. In most browsers this attribute is displayed as what is often referred to as a tooltip.Varieties
- Usually the required and optional attributes modify specific HTML elements
- While the standard attributes can be applied to most HTML elements.
- Event attributes, added in HTML version 4, allow an element to specify scripts to be run under specific circumstances.
Required and optional
Used by one element
- :,
- :
- :,,,,
- :,,,
- :
- :
- :
- :
- :
- :,
- :
- :,,
- :,,,,
- :
- :
- :
- :,
- :
- :,,,,
- :
Used by two elements
- and :
- * coords — coordinates of an or a within it.
- * shape — shape of an or a within it. Values: default, rect, circle, poly.
- and :
- * hreflang — Language code of the linked document.
- * rel — Nature of the linked document. Free text for, but uses a set of terms.
- * rev — Nature of the currently displayed page. Varies for and as for rel.
- and :
- * archive — archive URL
- * codebase — base URL
- and :
- * color — text color '
- * face — font family '
- and :
- * span — number of columns spanned
- and :
- * datetime — date and time of text or.
- and :
- * accept — types of files accepted when uploading or
- and :
- * frameborder — value specifies whether to display a border around the or.
- * marginheight — top and bottom margins in pixels around the or.
- * scrolling — value specifies whether to display scroll bars around the or.
- * marginwidth — left and right margins in pixels around the or.
- and :
- * cols — number of visible columns in or '
- * rows — number of visible rows in or '
- and :
- * usemap — specifies name of a map element to use with -or- URL of an image-map to use with.
- and :
- * readonly — specifies read-only text for and.
- and :
- * media — specifies display device for and. Values: all, aural, braille, handheld, print, projection, screen, tty, TV.
- and :
- * label — description text for an or.
- and :
- * abbr — abbreviated version of a table or.
- * axis — category name for a table or.
- * colspan — number of columns spanned by a table or.
- * nowrap — prevents wrapping of a table or.
- * rowspan — number of rows spanned by a table or.
- * scope — no effect on normal browser display, but marks a table or as a logical header for other cells. Values: col, colgroup, row, rowgroup.
Used by multiple elements
- align —,,,,,,,,
- alt —,,,
- bgcolor —,,,,
- border —,,
- char —,,,,,,,
- charoff —,,,,,,,
- charset —,,
- cite —,,,
- compact —,,,
- disabled —,,,,,
- height —,,, . Also deprecated in,
- href —,,,
- hspace —,. Also deprecated in
- longdesc —,,
- name —,,,,,,,,,,,,
- size —,,,,
- src —,,,,
- target —,,,,
- type —,,,,,,,,,
- valign —,,,,,,,
- value —,,,,
- vspace —,,
- width —,,,,,,,,,,
Standard attributes
Technically all standard attributes must be accepted by all elements, though they will not function with some elements. The table below lists some common standard attributes, and some elements they can function with.
Element | id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
id | |||||||||
dir | lang | xml:lang | |||||||
dir | lang | xml:lang | |||||||
dir | lang | xml:lang | |||||||
dir | lang | xml:lang | |||||||
title | dir | lang | xml:lang | ||||||
id | class | style | title | ||||||
id | class | style | title | ||||||
id | class | style | title | ||||||
id | class | style | title | ||||||
id | class | style | title | ||||||
id | class | style | title | dir | lang | ||||
id | class | style | title | dir | lang | ||||
id | class | style | title | dir | lang | ||||
id | class | style | title | dir | lang | ||||
id | class | style | title | dir | lang | ||||
id | class | style | title | dir | lang | ||||
id | class | style | title | dir | lang | ||||
id | class | style | title | dir | lang | ||||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
,,,,, | id | class | style | title | dir | lang | xml:lang | ||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | |||
id | class | style | title | dir | lang | xml:lang | accesskey | ||
id | class | style | title | dir | lang | xml:lang | accesskey | ||
id | class | style | title | dir | lang | xml:lang | tabindex | ||
id | class | style | title | dir | lang | xml:lang | tabindex | ||
id | class | style | title | dir | lang | xml:lang | accesskey | tabindex | |
id | class | style | title | dir | lang | xml:lang | accesskey | tabindex | |
id | class | style | title | dir | lang | xml:lang | accesskey | tabindex | |
id | class | style | title | dir | lang | xml:lang | accesskey | tabindex | |
id | class | style | title | dir | lang | xml:lang | accesskey | tabindex |
Event attributes
The standard attributes include the event handler attributes. They are all prefixed on-:Event attributes, added in HTML version 4, allow an element to specify scripts to be run under specific circumstances. The table below lists some common event handler attributes, and some elements they can function with.
Element | At | At | At | At | At | At | At | At | At | At | At | At | At | At | At | At | At |
onload | onunload | ||||||||||||||||
onload | onunload | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
,,,,, | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | ||||||||
onabort | onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | |||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | ||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | ||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | ||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | ||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | ||||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | onchange | |||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | onchange | onselect | ||||
onclick | ondblclick | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onkeydown | onkeypress | onkeyup | onblur | onfocus | onchange | onselect |