HTML attribute

From Wikipedia, the free encyclopedia
Jump to: navigation, search

An HTML attribute is a modifier of an HTML element. 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, 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).[1][2] Leaving attribute values unquoted is considered unsafe.[3]

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

Most elements can take any of several common attributes:

  • The id attribute provides a document-wide unique identifier for an element.[6] 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 or presentation purposes. Semantically, for example, classes are used in microformats. Presentationally, for example, an HTML document might use the designation class="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.
  • An author may use the style non-attributal codes presentational properties to a particular element. It is considered better practice to use an element’s id or class 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.

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[edit]

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.[7] Event attributes, added in HTML version 4, allow an element to specify scripts to be run under specific circumstances.[8]

Required and optional HTML attributes[edit]

Used by one tag[edit]

Used by two tags[edit]

  • <a> and <area>:
    • coords — coordinates of an area or a link within it.
    • shape — shape of an area or a link within it. Values: default, rect, circle, poly.
  • <a> and <link>:
    • hreflang — Language code of the linked document. (a, link)
    • rel — Nature of the linked document (relative to the page currently displayed). Free text for a, but link uses a set of terms (alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection).
    • rev — Nature of the currently displayed page (relative to the linked document). Varies for a and link as for rel.
  • <applet> and <object>:
  • <basefont> and <font>:
  • <col> and <colgroup>:
  • <del> and <ins>:
  • <form> and <input>:
    • accept — types of files accepted when uploading form or input
  • <frame> and <iframe>:
    • frameborder — value (0 or 1) specifies whether to display a border around the frame or iframe.
    • marginheight — top and bottom margins in pixels around the frame or iframe.
    • scrolling — value (yes, no, auto) specifies whether to display scroll bars around the frame or iframe.
    • marginwidth — left and right margins in pixels around the frame or iframe.
  • <frameset> and <textarea>:
    • cols — number of visible columns in frameset or cols (some variation)
    • rows — number of visible rows in frameset or rows (some variation)
  • <img> and <object>:
    • usemap — specifies name of a map tag to use with img -or- URL of an image-map to use with object.
  • <input> and <textarea>:
  • <link> and <style>:
    • media — specifies display device for link and style. Values: all, aural, braille, handheld, print, projection, screen, tty, TV.
  • <optgroup> and <option>:
  • <td> and <th>:
    • abbr — abbreviated version of a table cell or header.
    • axis — category name for a table cell or header.
    • colspan — number of columns spanned by a table cell or header.
    • nowrap — (deprecated) prevents wrapping of a table cell or header.
    • rowspan — number of rows spanned by a table cell or header.
    • scope — no effect on normal browser display, but marks a table cell or header as a logical header for other cells. Values: col, colgroup, row, rowgroup.

Used by multiple tags[edit]

— also (deprecated) in caption, div, h1 to h6, hr, iframe, img, input, legend, p, table

Standard attributes[edit]

<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[edit]

<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[edit]

  1. ^ "On SGML and HTML". World Wide Web Consortium. Retrieved November 16, 2008. 
  2. ^ "XHTML 1.0 - Differences with HTML 4". World Wide Web Consortium. Retrieved November 16, 2008. 
  3. ^ Korpela, Jukka (July 6, 1998). "Why attribute values should always be quoted in HTML". Cs.tut.fi. Retrieved November 16, 2008. 
  4. ^ "Tags used in HTML". World Wide Web Consortium. November 3, 1992. Retrieved November 16, 2008. 
  5. ^ "Objects, Images, and Applets in HTML documents". World Wide Web Consortium. December 24, 1999. Retrieved November 16, 2008. 
  6. ^ However, multiple identifiers may apply to the same element; in particular an element may be inside another element, each having an identifier.
  7. ^ "HTML / XHTML Standard Attributes". w3schools.com. 
  8. ^ "HTML / XHTML Standard Event Attributes". w3schools.com.