HTML attribute: Difference between revisions

Revision as of 03:56, 11 November 2022

Revision as of 04:47, 21 November 2022

Line 1:

{{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 opening tag to control the element's behaviour. HTML attributes are a modifier of an ''[[HTML element|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 tags|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.

Line 7 ⟶ 8:

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.<ref name="html4attributes">{{cite web | url=http://www.w3.org/TR/html4/index/attributes.html | title=Index of the HTML 4 Attributes | publisher=W3C | access-date=13 February 2015}}</ref>

== Description ==

HTML attributes generally appear as [[name–value pair]]s, separated by <code>=</code>, and are written within the start tag of an element, after the element's name:

<syntaxhighlight lang="xml"><element attribute="value">element content</element></syntaxhighlight>

Where <code>element</code> names the HTML element type, and <code>attribute</code> is the name of the attribute, set to the provided <code>value</code>. 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).<ref>{{cite web|url=http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.2 |title=On SGML and HTML |publisher=World Wide Web Consortium |access-date=November 16, 2008}}</ref><ref>{{cite web|url=http://www.w3.org/TR/xhtml1/diffs.html#h-4.4|title=XHTML 1.0 -– Differences with HTML&nbsp;4|publisher=World Wide Web Consortium|access-date=November 16, 2008}}</ref> Leaving attribute values unquoted is considered unsafe.<ref>{{cite web|first=Jukka|last=Korpela|url=https://jkorpela.fi/qattr.html|title=Why attribute values should always be quoted in HTML|publisher=Cs.tut.fi |date=July 6, 1998|access-date=November 16, 2008}}</ref>

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<ref name="tagshtml">{{cite web|url=http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html |title=Tags used in HTML |publisher=World Wide Web Consortium |date=November 3, 1992 |access-date=November 16, 2008}}</ref> (like the <code>ismap</code> attribute for the <code>img</code> element<ref>{{cite web|url=http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#adef-ismap|title=Objects, Images, and Applets in HTML documents |publisher=World Wide Web Consortium |date=December 24, 1999|access-date=November 16, 2008}}</ref>).

Line 30 ⟶ 31:

Most elements also take the language-related attributes <code>lang</code> and <code>dir</code>.

=== Common attributes ===

Usually, [[HTML element]]s can take any of several most common standard attributes ([[#Standard_attributesStandard attributes|See the complete list]]):

* The '''<code>id</code>''' attribute provides a document-wide unique identifier for an element.<ref>However, multiple identifiers may apply to the same element; in particular an element may be inside another element, each having an identifier.</ref><ref>{{Cite web|url=https://www.w3schools.com/html/html_id.asp|title=HTML id|website=www.w3schools.com|access-date=2020-04-27}}</ref><ref>{{Cite web|url=https://www.w3schools.com/tags/att_global_id.asp|title=HTML Global id Attribute|website=www.w3schools.com|access-date=2020-04-27}}</ref> 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 <code><nowiki>http://en.wikipedia.org/wiki/HTML#Attributes</nowiki></code> (to refer to the section "Attributes" in the "HTML" page).

Line 39 ⟶ 40:

* The '''<code>title</code>''' 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

Line 45 ⟶ 46:

*Event attributes, added in HTML version 4, allow an element to specify [[JavaScript|scripts]] to be run under specific circumstances.<ref>{{cite web|url=https://www.w3schools.com/tags/ref_eventattributes.asp|title=HTML / XHTML Standard Event Attributes|publisher=w3schools.com}}</ref>

== Required and optional ==

=== Used by one element ===

* {{MDNHTMLRef|applet}}: {{MDNHTMLRef|applet|code}}, {{MDNHTMLRef|applet|object}}

* {{MDNHTMLRef|area}}: {{MDNHTMLRef|area|nohref}}

Line 69 ⟶ 70:

* {{MDNHTMLRef|td}}: {{MDNHTMLRef|td|headers}}

=== Used by two elements ===

* {{MDNHTMLRef|a}} and {{MDNHTMLRef|area}}:

** coords — coordinates of an {{MDNHTMLRef|area|coords|v=1}} or a {{MDNHTMLRef|link|coords|v=1}} within it.

Line 113 ⟶ 114:

** scope — no effect on normal browser display, but marks a table {{MDNHTMLRef|td|scope|t=cell}} or {{MDNHTMLRef|td|scope|t=header}} as a logical header for other cells. Values: col, colgroup, row, rowgroup.

=== Used by multiple elements ===

* '''align''' — {{MDNHTMLRef|applet|align|v=1}}, {{MDNHTMLRef|col|align|v=1}}, {{MDNHTMLRef|colgroup|align|v=1}}, {{MDNHTMLRef|object|align|v=1}}, {{MDNHTMLRef|tbody|align|v=1}}, {{MDNHTMLRef|td|align|v=1}}, {{MDNHTMLRef|tfoot|align|v=1}}, {{MDNHTMLRef|th|align|v=1}}, {{MDNHTMLRef|thead|align|v=1}}

:*align also deprecated in {{MDNHTMLRef|caption|align|v=1}}, {{MDNHTMLRef|div|align|v=1}}, {{MDNHTMLRef|h1|align|v=1}} to {{MDNHTMLRef|h6|align|v=1}}, {{MDNHTMLRef|hr|align|v=1}}, {{MDNHTMLRef|iframe|align|v=1}}, {{MDNHTMLRef|img|align|v=1}}, {{MDNHTMLRef|input|align|v=1}}, {{MDNHTMLRef|legend|align|v=1}}, {{MDNHTMLRef|p|align|v=1}}, {{MDNHTMLRef|table|align|v=1}}

Line 139 ⟶ 140:

* '''width''' — {{MDNHTMLRef|applet|width|v=1}}, {{MDNHTMLRef|col|width|v=1}}, {{MDNHTMLRef|colgroup|width|v=1}}, {{MDNHTMLRef|hr|width|v=1}}, {{MDNHTMLRef|iframe|width|v=1}}, {{MDNHTMLRef|img|width|v=1}}, {{MDNHTMLRef|object|width|v=1}}, {{MDNHTMLRef|pre|width|v=1}}, {{MDNHTMLRef|table|width|v=1}}, {{MDNHTMLRef|td|width|v=1}}, {{MDNHTMLRef|th|width|v=1}}

== Standard attributes ==

''Standard attributes'' are also known as ''global attributes'', and function with a large number of elements.<ref name="globalattribute">{{cite web|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes |title=Global attributes -– HTML (HyperText Markup Language) MDN |access-date=2015-02-12}}</ref> 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.<ref name="globalattribute" /> 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.<ref name="HTMLReference">{{cite web | url=https://developer.mozilla.org/en-US/docs/Web/HTML/Reference | title=HTML reference -– HTML (HyperText Markup Language) MDN | access-date=13 February 2015}}</ref> The table below lists some common standard attributes, and some elements they can function with.

{| class="wikitable sortable"

Line 1,060 ⟶ 1,061:

|}

== Event attributes ==

The standard attributes include the ''event handler attributes''. They are all prefixed on-:<ref name="globalattribute" />

{{columns-list|colwidth=12em|

* onabort

Line 1,095 ⟶ 1,096:

* onkeypress

* onkeyup

* onload

* onloadeddata

* onloadedmetadata

Line 2,482 ⟶ 2,483:

|}

== See also ==

* [[HTML element]]

== References ==

<references />

{{DEFAULTSORT:Html Attribute}}

[[Category:HTML]]