HTML attribute: Difference between revisions

Content deleted Content added
Added archives, ce
Line 35:
Usually, [[HTML element]]s can take any of several most common standard attributes ([[#Standard 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.comW3Schools|access-date=2020-04-27 |url-status=live |archive-url=https://web.archive.org/web/20200427024838/https://www.w3schools.com/html/html_id.asp |archive-date= Apr 27, 2020 }}</ref><ref>{{Cite web|url=https://www.w3schools.com/tags/att_global_id.asp|title=HTML Global id Attribute|website=www.w3schools.comW3Schools|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).
* The '''<code>class</code>''' attribute provides a way of classifying similar elements. Multiple class names can be added by separating them with spaces.<ref>{{Cite web|url=https://www.w3schools.com/html/html_classes.asp|title=HTML Classes|website=www.w3schools.comW3Schools|access-date=2020-04-27}}</ref><ref>{{Cite web|url=https://www.w3schools.com/tags/att_global_class.asp|title=HTML Global class Attribute|website=www.w3schools.comW3Schools|access-date=2020-04-27}}</ref> Semantically, for example, classes are used in [[microformat]]s. Additionally authors of style sheets can construct [[CSS selector|selectors]] that match elements by class for styling purposes. For example, a HTML document might use the designation <code>class="notation"</code> to indicate that all elements with this class value are subordinate to the main text of the document. Such elements might be gathered together as footnotes on a page—instead of appearing in the place suggested by their position within the HTML source. The style sheet author might also define a rule with the <code>.notation</code> selector and define the property <code>font-size: small;</code>.
* The '''<code>style</code>''' attribute provides a way of applying element-specific style rules. Multiple [[CSS#Declaration block|style declarations]] can be added by separating them with semicolons and an optional space, where each declaration includes a CSS property name and a value separated by a colon and an optional space (Example: <code>style="color: red; text-align: center;"</code>).<ref>{{Cite web|url=https://www.w3schools.com/html/html_styles.asp|title=HTML Styles|website=www.w3schools.comW3Schools|access-date=2023-05-12}}</ref><ref>{{Cite web|url=https://www.w3schools.com/tags/att_global_style.asp|title=HTML Global style Attribute|website=www.w3schools.comW3Schools|access-date=2023-05-12}}</ref><ref>{{Cite web|url=https://www.w3schools.com/Css/css_syntax.asp
|title=CSS Syntax|website=www.w3schools.comW3Schools|access-date=2023-05-12}}</ref> The '''<code>style</code>''' attribute can be used on any HTML element (it will validate on any HTML element; however, it is not necessarily useful). It is considered better practice to add the style information to a [[Style sheet (web development)|style sheet]], often accomplished with selectors that match the element class or ID. Sometimes, however, inline styles are favored where style sheets are considered too cumbersome for a simple and specific or ad hoc style specification.
* 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]].
 
Line 44:
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.<ref>{{cite web|url=https://www.w3schools.com/tags/ref_standardattributes.asp|title=HTML /Global XHTMLAttributes Standard Attributes|publisher=w3schools.comW3Schools}}</ref>
*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.comW3Schools}}</ref>
 
== Required and optional ==
Line 143:
== 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) |website=MDN Web Docs |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) |website=MDN Web Docs | access-date=13 February 2015}}</ref> The table below lists some common standard attributes, and some elements they can function with.
 
{| class="wikitable sortable"