HTML attribute

An HTML attribute is 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: (1) required attributes, needed by a particular element type for that element type to function correctly; (2) optional attributes, used to modify the default functionality of an element type; (3) standard attributes, supported by a large number of element types; and (4) 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.[1]

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:

<tag attribute="value">content to be modified by the tag</tag>

Where tag 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 (but not XHTML).[2][3] Leaving attribute values unquoted is considered unsafe.[4]

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[5] (like the ismap attribute for the img element[6]).

Most elements can take any of several common attributes:

The abbreviation element, abbr, can be used to demonstrate these various attributes:

<abbr id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</abbr>

This example displays as HTML; in most browsers, pointing the cursor at the abbreviation should display the title text "Hypertext Markup Language."

Most elements also take the language-related attributes lang and dir.

Varieties

HTML attributes are generally classed as required attributes, optional attributes, standard attributes, and event attributes. Usually the required and optional attributes modify specific HTML elements, while the standard attributes can be applied to most HTML elements.[8] Event attributes, added in HTML version 4, allow an element to specify scripts to be run under specific circumstances.[9]

Required and optional HTML attributes

Used by one tag

Used by two tags

Used by multiple tags

Standard attributes

Standard attributes are also known as global attributes, and function with a large number of elements.[10] They include the basic standard attributes: these include accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title. There are also some experimental ones. Both xml:lang and xml:base have been deprecated. The multiple aria-* attributes improve accessibility.[10] The event handler attributes are listed later on.

Technically all standard attributes must be accepted by all elements, though they will not function with some elements.[11] The table below lists some common standard attributes, and some tags they can function with.

Tag id class style title dir lang xml:lang accesskey tabindex
<param> id
<head> dir lang xml:lang
<html> dir lang xml:lang
<meta> dir lang xml:lang
<title> dir lang xml:lang
<style> title dir lang xml:lang
<applet> id class style title
<br> id class style title
<frame> id class style title
<frameset> id class style title
<iframe> id class style title
<basefont> id class style title dir lang
<center> id class style title dir lang
<dir> id class style title dir lang
<font> id class style title dir lang
<menu> id class style title dir lang
<s> id class style title dir lang
<strike> id class style title dir lang
<u> id class style title dir lang
<abbr> id class style title dir lang xml:lang
<acronym> id class style title dir lang xml:lang
<address> id class style title dir lang xml:lang
<b> id class style title dir lang xml:lang
<big> id class style title dir lang xml:lang
<blockquote> id class style title dir lang xml:lang
<body> id class style title dir lang xml:lang
<caption> id class style title dir lang xml:lang
<cite> id class style title dir lang xml:lang
<code> id class style title dir lang xml:lang
<col> id class style title dir lang xml:lang
<colgroup> id class style title dir lang xml:lang
<dd> id class style title dir lang xml:lang
<del> id class style title dir lang xml:lang
<dfn> id class style title dir lang xml:lang
<div> id class style title dir lang xml:lang
<dl> id class style title dir lang xml:lang
<dt> id class style title dir lang xml:lang
<em> id class style title dir lang xml:lang
<fieldset> id class style title dir lang xml:lang
<form> id class style title dir lang xml:lang
<hn> id class style title dir lang xml:lang
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> id class style title dir lang xml:lang
<i> id class style title dir lang xml:lang
<img> id class style title dir lang xml:lang
<ins> id class style title dir lang xml:lang
<kbd> id class style title dir lang xml:lang
<li> id class style title dir lang xml:lang
<link> id class style title dir lang xml:lang
<map> id class style title dir lang xml:lang
<noframes> id class style title dir lang xml:lang
<noscript> id class style title dir lang xml:lang
<ol> id class style title dir lang xml:lang
<optgroup> id class style title dir lang xml:lang
<option> id class style title dir lang xml:lang
<p> id class style title dir lang xml:lang
<pre> id class style title dir lang xml:lang
<q> id class style title dir lang xml:lang
<samp> id class style title dir lang xml:lang
<small> id class style title dir lang xml:lang
<span> id class style title dir lang xml:lang
<strong> id class style title dir lang xml:lang
<sub> id class style title dir lang xml:lang
<sup> id class style title dir lang xml:lang
<table> id class style title dir lang xml:lang
<tbody> id class style title dir lang xml:lang
<td> id class style title dir lang xml:lang
<tfoot> id class style title dir lang xml:lang
<th> id class style title dir lang xml:lang
<thead> id class style title dir lang xml:lang
<tr> id class style title dir lang xml:lang
<tt> id class style title dir lang xml:lang
<ul> id class style title dir lang xml:lang
<var> id class style title dir lang xml:lang
<label> id class style title dir lang xml:lang accesskey
<legend> id class style title dir lang xml:lang accesskey
<object> id class style title dir lang xml:lang tabindex
<select> id class style title dir lang xml:lang tabindex
<a> id class style title dir lang xml:lang accesskey tabindex
<area> id class style title dir lang xml:lang accesskey tabindex
<button> id class style title dir lang xml:lang accesskey tabindex
<input> id class style title dir lang xml:lang accesskey tabindex
<textarea> 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-. They are: 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.[10]

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 tags they can function with.

Tag At At At At At At At At At At At At At At At At At
<frameset> onload onunload
<body> onload onunload onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<abbr> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<acronym> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<address> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<b> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<big> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<blockquote> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<caption> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<center> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<cite> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<code> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<col> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<colgroup> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<dd> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<del> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<dfn> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<dir> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<div> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<dl> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<dt> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<em> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<fieldset> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<hr> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<i> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<ins> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<kbd> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<legend> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<li> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<link> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<map> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<menu> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<noframes> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<noscript> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<object> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<ol> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<optgroup> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<option> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<p> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<pre> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<q> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<s> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<samp> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<small> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<span> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<strike> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<strong> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<sub> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<sup> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<table> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<tbody> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<td> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<tfoot> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<th> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<thead> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<tr> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<tt> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<u> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<ul> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<var> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<img> onabort onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
<a> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus
<area> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus
<button> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus
<form> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus
<label> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus
<select> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus onchange
<input> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus onchange onselect
<textarea> onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus onchange onselect

References

  1. "Index of the HTML 4 Attributes". http://www.w3.org. Retrieved 13 February 2015. External link in |publisher= (help)
  2. "On SGML and HTML". World Wide Web Consortium. Retrieved November 16, 2008.
  3. "XHTML 1.0 - Differences with HTML 4". World Wide Web Consortium. Retrieved November 16, 2008.
  4. Korpela, Jukka (July 6, 1998). "Why attribute values should always be quoted in HTML". Cs.tut.fi. Retrieved November 16, 2008.
  5. "Tags used in HTML". World Wide Web Consortium. November 3, 1992. Retrieved November 16, 2008.
  6. "Objects, Images, and Applets in HTML documents". World Wide Web Consortium. December 24, 1999. Retrieved November 16, 2008.
  7. However, multiple identifiers may apply to the same element; in particular an element may be inside another element, each having an identifier.
  8. "HTML / XHTML Standard Attributes". w3schools.com.
  9. "HTML / XHTML Standard Event Attributes". w3schools.com.
  10. 1 2 3 "Global attributes - HTML (HyperText Markup Language) MDN". Retrieved 2015-02-12.
  11. "HTML reference - HTML (HyperText Markup Language) MDN". Retrieved 13 February 2015.
This article is issued from Wikipedia - version of the Tuesday, December 08, 2015. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.