HTML attribute

From Wikidot - Australian Business Wiki
Revision as of 12:05, 8 April 2021 by Wikiweb (talk | contribs) (Created page with "{{short description|Special words used inside the opening tag to control the element's behaviour}} {{Html series}} '''HTML attributes''' are special words used inside the open...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Template:Short description Template:Html series 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: (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 many 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:

<element attribute="value">element content</element>

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 (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]).

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 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 (tooltip).

<div style="text-align: center;">Centered text</div>

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 (See the complete list):

  • The id attribute provides a document-wide unique identifier for an element.[7][8][9] 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 (to refer to the section "Attributes" in the "HTML" page).
  • The class attribute provides a way of classifying similar elements.[10][11] 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 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. Another presentation use would be as a CSS selector.
  • An author may use the style non-attributal codes presentational properties to a particular element.The style attribute can be used on any HTML element (it will validate on any HTML element element; however, it is not necessarily useful). 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.

Varieties

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

Required and optional

Used by one element

Used by two elements

Used by multiple elements

Standard attributes

Standard attributes are also known as global attributes, and function with a large number of elements.[14] 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.[14] 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.[15] 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
Template:MDNHTMLRef id
Template:MDNHTMLRef dir lang xml:lang
Template:MDNHTMLRef dir lang xml:lang
Template:MDNHTMLRef dir lang xml:lang
Template:MDNHTMLRef dir lang xml:lang
Template:MDNHTMLRef title dir lang xml:lang
Template:MDNHTMLRef id class style title
Template:MDNHTMLRef id class style title
Template:MDNHTMLRef id class style title
Template:MDNHTMLRef id class style title
Template:MDNHTMLRef id class style title
Template:MDNHTMLRef id class style title dir lang
Template:MDNHTMLRef id class style title dir lang
Template:MDNHTMLRef id class style title dir lang
Template:MDNHTMLRef id class style title dir lang
Template:MDNHTMLRef id class style title dir lang
Template:MDNHTMLRef id class style title dir lang
Template:MDNHTMLRef id class style title dir lang
Template:MDNHTMLRef id class style title dir lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef, Template:MDNHTMLRef, Template:MDNHTMLRef, Template:MDNHTMLRef, Template:MDNHTMLRef, Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang
Template:MDNHTMLRef id class style title dir lang xml:lang accesskey
Template:MDNHTMLRef id class style title dir lang xml:lang accesskey
Template:MDNHTMLRef id class style title dir lang xml:lang tabindex
Template:MDNHTMLRef id class style title dir lang xml:lang tabindex
Template:MDNHTMLRef id class style title dir lang xml:lang accesskey tabindex
Template:MDNHTMLRef id class style title dir lang xml:lang accesskey tabindex
Template:MDNHTMLRef id class style title dir lang xml:lang accesskey tabindex
Template:MDNHTMLRef id class style title dir lang xml:lang accesskey tabindex
Template:MDNHTMLRef 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-:[14] Template:Columns-list

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
Template:MDNHTMLRef onload onunload
Template:MDNHTMLRef onload onunload onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef, Template:MDNHTMLRef, Template:MDNHTMLRef, Template:MDNHTMLRef, Template:MDNHTMLRef, Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onabort onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus onchange
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus onchange onselect
Template:MDNHTMLRef onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup onblur onfocus onchange onselect

See also

References

  1. "Index of the HTML 4 Attributes". W3C. http://www.w3.org/TR/html4/index/attributes.html. 
  2. "On SGML and HTML". World Wide Web Consortium. http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.2. 
  3. "XHTML 1.0 - Differences with HTML 4". World Wide Web Consortium. http://www.w3.org/TR/xhtml1/diffs.html#h-4.4. 
  4. Korpela, Jukka (July 6, 1998). "Why attribute values should always be quoted in HTML". Cs.tut.fi. http://www.cs.tut.fi/~jkorpela/qattr.html. 
  5. "Tags used in HTML". World Wide Web Consortium. November 3, 1992. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html. 
  6. "Objects, Images, and Applets in HTML documents". World Wide Web Consortium. December 24, 1999. http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#adef-ismap. 
  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 id". https://www.w3schools.com/html/html_id.asp. 
  9. "HTML Global id Attribute". https://www.w3schools.com/tags/att_global_id.asp. 
  10. "HTML Classes". https://www.w3schools.com/html/html_classes.asp. 
  11. "HTML Global class Attribute". https://www.w3schools.com/tags/att_global_class.asp. 
  12. "HTML / XHTML Standard Attributes". w3schools.com. https://www.w3schools.com/tags/ref_standardattributes.asp. 
  13. "HTML / XHTML Standard Event Attributes". w3schools.com. https://www.w3schools.com/tags/ref_eventattributes.asp. 
  14. 14.0 14.1 14.2 "Global attributes - HTML (HyperText Markup Language) MDN". https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes. 
  15. "HTML reference - HTML (HyperText Markup Language) MDN". https://developer.mozilla.org/en-US/docs/Web/HTML/Reference.