HTML definisce alcuni attributi che sono comuni a tutti gli elementi HTML . Questi atttributi possono essere utilizzati su tutti gli elementi, anche se gli attributi possono non avere effetti su alcuni elemento.
Nota d'uso: La specifica HTML5 afferma che gli attributi globali possono essere specificati su tutti gli elementi HTML, anche quelli non specificati in HTML5. Questo significa che tutti gli elementi non-standard devono comunque consentire l'uso di questi attributi, anche se con l'utilizzo di tali elementi, il documento non è più HTML5-compliant. Per esempio, i browser HTML5-compliant nascondono i contenuti contrassegnati come <foo hidden>...<foo>,anche se <foo> non è un valido elemento HTML.
accesskey
Questo attributo fornisce un suggerimento per generare una scorciatoia da tastiera per l'elemento corrente. Questo attributo è costituito da un elenco separato da spazi di caratteri (un singolo punto Unicode). Il browser dovrebbe utilizzare il primo che esiste sul layout di tastiera del computer.
HTML 4 Nelle precedenti versioni dell'HTML, solo un carattere poteva essere specificato. Inoltre non era un attributo globale e poteva essere applicato solo ai tag <a>, <area>, <button>, <input>, <label>, <legend> and <textarea>.
| Windows | Linux | Mac | |
|---|---|---|---|
| Firefox | Alt + Shift + a key |
|
|
| Internet Explorer | Alt + a key | N/A | |
| Google Chrome | Alt + a key | Control + Alt + a key | |
| Safari | Alt + a key | N/A | Control + Alt + a key |
| Opera | Shift + Esc apre una lista dei contenuti che sono accessibili tramite un'accesskey, quindi può scegliere un elemento con una chiave | ||
| Normative document | WHATWG HTML Living Standard The definition of 'accesskey' in that specification. (HTML 4: HTML 4.01 Specification The definition of 'accesskey' in that specification.) |
class
Questo attributo è un elenco separato da spazi delle classi dell'elemento. Le classi permettono ai CSS e Javascript di selezionare e accedere a elementi specifici con i selettori di classe o funzioni come il metodo DOM document.getElementsByClassName.
Nota d'uso: Anche se le specificazoni non pongono requisiti sul nome delle classi, gli sviluppatori del web sono incoraggiati ad usare nomi che descrivono lo scopo semantico dell'elemento, anzichè la presentazione dell'elemento (ad esempio, attributo che descrive un attributo piuttosto che corsivo, anche se un elemento di questa classe può essere presentata dal corsivo). I nomi semantici rimangono logici, anche se la presentazione della pagina cambia.
| Normative document | WHATWG HTML Living Standard The definition of 'class' in that specification. (HTML 4: HTML 4.01 Specification The definition of 'class' in that specification.) |
contenteditable
HTML5 This enumerated attribute indicates if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:
- true or the empty string, which indicates that the element must be editable;
- false, which indicates that the element must not be editable.
If this attribute is not set, its default value is inherited from its parent element.
Usage note: This attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values true, false or the empty string is mandatory and that a shorthand like <label contenteditable>Example Label</label> is not allowed. The correct usage is <label contenteditable="true">Example Label</label>.
| Normative document | WHATWG HTML Living Standard The definition of 'contenteditable' in that specification. |
contextmenu
HTML5 This attribute is related to the new WHATWG HTML Living Standard
The definition of 'contextmenu' in that specification..
A context menu is a menu that appears upon user interaction, such as a right-click. HTML5 now allows us to customize this menu. Here are some implementation examples, including nested menus.
The following HTML...
<body contextmenu="share">
<menu type="context" id="share">
<menu label="share">
<menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurray! I am learning ContextMenu from MDN via Mozilla');"></menuitem>
<menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"></menuitem>
</menu>
</menu>
<ol>
<li>Anywhere in the example you can share the page on Twitter and Facebook using the Share menu from your context menu.</li>
<li><pre contextmenu="changeFont" id="fontSizing">On this specific list element, you can change the size of the text by using the "Increase/Decrease font" actions from your context menu</pre></li>
<menu type="context" id="changeFont">
<menuitem label="Increase Font" onclick="incFont()"></menuitem>
<menuitem label="Decrease Font" onclick="decFont()"></menuitem>
</menu>
<li contextmenu="ChangeImage" id="changeImage">On the image below, you can fire the "Change Image" action in your Context Menu.</li><br />
<img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
<menu type="context" id="ChangeImage">
<menuitem label="Change Image" onclick="changeImage()"></menuitem>
</menu>
</ol>
</body>
...used with this JavaScript...
function incFont(){
document.getElementById("fontSizing").style.fontSize="larger";
}
function decFont(){
document.getElementById("fontSizing").style.fontSize="smaller";
}
function changeImage(){
var j = Math.ceil((Math.random()*39)+1);
document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
}
...will result in:
data-*
HTML5 This class of attributes, called custom data attributes, allows proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access to them.
The * may be replaced by any name following the production rule of xml names with the following restrictions:
- the name must not start with
xml, whatever case is used for these letters; - the name must not contain any semicolon (
U+003A); - the name must not contain capital
AtoZletters.
Note that the HTMLElement.dataset attribute is a StringMap and the name of the custom data attribute data-test-value will be accessible via HTMLElement.dataset.testValue as any dash (U+002D) is replaced by the capitalization of the next letter (camelcase).
| Normative document | WHATWG HTML Living Standard The definition of 'data' in that specification. |
dir
This enumerated attribute indicates the directionality of the element's text. It can have the following values:
- ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);
- rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);
- auto, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element. HTML5
Usage notes:
- This attribute is mandatory for the
<bdo>element where it has a different semantic meaning. - This attribute is not inherited by the
<bdi>element. If not set, its value is auto. - This attribute can be overridden by the CSS properties
directionandunicode-bidi, if a CSS page is active and the element supports these properties. - As the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.
- The
autovalue should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.
| Normative document | WHATWG HTML Living Standard The definition of 'dir' in that specification. (HTML 4: HTML 4.01 Specification The definition of 'dir' in that specification.) |
draggable
HTML5 This enumerated attribute indicates whether the element can be dragged, using the Drag and Drop API. It can have the following values:
- true, which indicates that the element may be dragged
- false, which indicates that the element may not be dragged.
If this attribute is not set, its default value is auto, meaning the behavior should be the one defined by default by the browser.
Usage notes:
- This attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values true or false is mandatory and that a shorthand like
<label draggable>Example Label</label>is not allowed. The correct usage is<label draggable="true">Example Label</label>. - By default, only text selections, images, and links can be dragged. For all others elements, the event ondragstart must be set in order to the drag and drop mechanism to work, as shown in this comprehensive example.
| Normative document | HTML5, section 3.9.5 |
dropzone
HTML5 Unimplemented This enumerated attribute indicates what types of content can be dropped on an element, using the Drag and Drop API. It can have the following values:
- copy, which indicates that dropping will create a copy of the element that was dragged
- move, which indicates that the element that was dragged will be moved to this new location.
- link, will create a link to the dragged data.
| Normative document | HTML5, section 8.6.8 |
hidden
HTML5 This Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements.
Usage notes:
- This attribute must not be used to hide content that could legitimately be shown. For example, it shouldn't be used to hide tabs panels of a tabbed interface, as this is a styling decision and another style showing them would lead to a perfectly correct page.
- Hidden elements shouldn't be linked from non-hidden elements.
- Elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.
- Changing the display CSS value of an element with the
hiddenattribute overrides the behavior. For instance, an element styleddisplay: flexwill be displayed on screen regardless of thehiddenattribute being present.
| Normative document | HTML5, section 8.1 |
id
This attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
Usage note:
- This attribute's value is an opaque string: this means that web author must not use it to convey any information. Particular meaning, for example semantic meaning, must not be derived from the string.
- This attribute's value must not contain white spaces. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID defined through the id attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.
- Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.
| Normative document | HTML5, section 3.2.3.1 (HTML 4: HTML4.01, section 7.5.2) |
itemid
itemprop
itemref
itemscope
itemtype
Living Standard These attributes are related to the WHATWG HTML Microdata feature. bug 591467
lang
This attribute participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the Tags for Identifying Languages (BCP47) IETF document. If the tag content is the empty string the language is set to unknown; if the tag content is not valid, regarding to BCP47, it is set to invalid.
Usage note:
- Even if the lang attribute is set, it may not be taken into account, as the xml:lang attribute has priority. Read the algorithm determining the language of an element's content to see how the language is determined in all cases.
- For the CSS pseudo-class
:lang, two invalid language names are different if their names are different.
| Normative document | HTML5, section 3.2.3.3(HTML 4: HTML4.01, section 8.1) |
spellcheck
HTML5 This enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:
- true, which indicates that the element should be, if possible, checked for spelling errors;
- false, which indicates that the element should not be checked for spelling errors.
If this attribute is not set, its default value is element-type and browser-defined. This default value may also be inherited, which means that the element content will be checked for spelling errors only if its nearest ancestor has a spellcheck state of true.
You can consult this article to see a comprehensive example of the use of this attribute.
Usage notes:
- This attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values true or false is mandatory and that a shorthand like
<label spellcheck>Example Label</label>is not allowed. The correct usage is<label spellcheck="true">Example Label</label>. - This attribute is merely a hint for the browser: browsers are not required to be able to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking.
- The default value of this attribute is browser and element-dependant:
| Browser | <bdo> |
<textarea> |
<input> |
others | Comment |
|---|---|---|---|---|---|
| Firefox | false | false | false | inherited | When layout.spellcheckDefault is 0 |
| false | true | inherited | inherited | When layout.spellcheckDefault is 1 (default value) | |
| false | true | true | inherited | When layout.spellcheckDefault is 2 | |
| Seamonkey | false | false | false | inherited | When layout.spellcheckDefault is 0 |
| false | true | inherited | inherited | When layout.spellcheckDefault is 1 (default value) | |
| false | true | true | inherited | When layout.spellcheckDefault is 2 | |
| Camino | false | false | false | inherited | When layout.spellcheckDefault is 0 |
| false | true | inherited | inherited | When layout.spellcheckDefault is 1 | |
| false | true | true | inherited | When layout.spellcheckDefault is 2 (default value) |
| Normative document | HTML5, section 8.8 |
style
This attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.
Usage note: This attribute must not be used to convey semantic information. Even if all styling is removed, a page should remain semantically correct. Typically it shouldn't be used to hide irrelevant information; this should be done using the hidden attribute.
| Normative document | HTML5, section 3.2.3.7(HTML 4: HTML4.01, section 14.2.2) |
tabindex
This integer attribute indicates if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:
- a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
- 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
- a positive value which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document).
An element with a 0 value, an invalid value, or no tabindex value should be placed after elements with a positive tabindex in the sequential keyboard navigation order.
You can consult this article to see a comprehensive explanation of focus management.
| Normative document | HTML5, section 8.4.1(HTML 4: HTML4.01, section 17.11.1) |
title
This attribute contains a text representing advisory information related to the element it belongs too. Such information can typically, but not necessarily, be presented to the user as a tooltip. Here are some typical uses of this attribute:
- Link: the title or a description of the linked document
- Media element like an image: a description or associated credits
- Paragraph: a footnote or a commentary about it
- Quotation: some information about the author, and so on.
If this attribute is omitted, it means that the title of the nearest ancestor of this element is still relevant for it (and can legitimately be used as the tooltip for that element. If this attribute is set to the empty string, it explicitly means that its nearest ancestor's title is not relevant for this element (and shouldn't be used in the tooltip for that element).
Additional semantics are attached to the title attributes of the <link>, <abbr> and <input>.
Usage note: The title attribute may contains several lines. Each U+000A LINE FEED (LF) inserted represents such a newline. Some caution must be taken though, as that means that:
<p>Newlines in title should be taken into account,like this <abbr title="This is a multiline title">example</abbr>.</p>
defines a two-line title.
Support for multi-line titles was added to Gecko in Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9).
| Normative document | HTML5, section 3.2.3.3 (HTML 4: HTML4.01, section 7.4.3 |