Certified HTML5 Developer Learning Resources HTML5 Global attributes

Learning Resources
 

HTML5 Global attributes


HTML5 Global Attributes

Each HTML5 element supports a number of attributes. The attributes listed here are common to all HTML5 elements.

Attribute Description
accesskey Specifies a shortcut key that can be used to access the element.

Possible values.

[Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.]

class Document wide identifier. Used to refer to a class specified in the style sheet. The value should be the name of the class you wish to use.

 

contenteditable Sets whether the user can edit the content or not.

Possible values:

  • true
  • false
contextmenu Sets a context menu for an element. The value must be the ID of a menu element in the DOM
dir Specifies the direction of the text.

Possible values:

Value Description
ltr Specifies that the text should read left to right.
rtl Specifies that the text should read right to left.
auto Specifies that the text direction should be determined programatically using the contents of the element.
draggable Specifies whether the user is allowed to drag the element or not.

Possible values:

  • true
  • false
  • auto
Value Description
true Specifies that the element is draggable.
false Specifies that the element is not draggable.
auto Uses the default behavior of the user agent/browser. This is the default value.
dropzone Specifies what should happen when the user "drops" an element (i.e. after dragging it) onto the current element.

Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive.

Possible values:

Value Description
copy Results in a copy of the dragged data. Default value.
move Results in the data being moved to the new location.
link Results in a link to the original data.
Any keyword with eight characters or more, beginning with the an ASCII case-insensitive match for the string "string:" Specifies that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
Any keyword with six characters or more, beginning with an ASCII case-insensitive match for the string "file:" Allows you to specify which file types can be processed (i.e. copied, moved or linked) in this dropzone. Example: dropzone="copy file:image/png file:image/gif file:image/jpeg"

Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.

hidden Indicates that the element is not yet, or is no longer, relevant. The browser/user agent does not display elements that have the hidden attribute present.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either hiddenor hidden="hidden").

Possible values:

  • [Empty string]
  • hidden
id Document wide identifier. Used with CSS and JavaScript. The value should be the name of the id you wish to use.
inert Boolean attribute that indicates that the element is to be made inert. This means that the browser/user agent acts as though the element is not there, even though it may still display the element.

For example, a block of text that has been marked with the inertattribute may not be searchable when the user attempts a browser text search (eg, commonly called "Find in page" or similar). The text may not be able to be targetted for user interaction events (such as mouseoveretc), and the user may not be able to select the block of text.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either inertor inert="inert").

Possible values:

  • [Empty string]
  • inert
itemid Provides a global identifier for an "item". The itemidattribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.

The itemidattribute can only be present in elements that include both the itemscopeand the itemtypeattributes, as long as the itemtypeattribute specifies a vocabulary that supports global identifiers for items, as defined by that vocabulary's specification.

itemprop Provides one or more properties to one or more "items".

Although the itempropattribute is optional and can be used on any HTML element, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute's value must have at least one token. According to the HTML5 specification, each token must be one of the following:

  • A valid URL that is an absolute URL, or
  • If the item is a typed item: a "defined property name" allowed in this situation according to the specification that defines the relevant types for the item, or
  • If the item is not a typed item: a string that contains no U+002E FULL STOP characters (.) and no U+003A COLON characters (:).

Also, Specifications that introduce defined property names that are not absolute URLs must ensure all such property names contain no U+002E FULL STOP characters (.), no U+003A COLON characters (:), and no space characters.

itemref Used in conjunction with the itemscopeattribute, the itemrefattribute provides a list of additional elements to crawl to find the name-value pairs of the "item". Although the itemrefattribute is optional, if specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, consisting of IDs of elements in the same home subtree. Also, the itemrefcan only be used on elements that also have the itemscopeattribute present.
itemscope HTML5 elements that have the itemscopeattribute create a name-value pair called an "item". Elements with an itemscopeattribute may also have an itemtypeattribute specified, to give the item types of the item.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either itemscopeor itemscope="itemscope").

Possible values:

  • [Empty string]
  • itemscope
itemtype Provides an item type for elements containing the itemscopeattribute. The itemtypeattribute is optional however, if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute's value must have at least one token.

The itemtypeattribute must only be present in elements that include the itemscopeattribute.

lang Sets the language code to be used.

Possible values:

[Must be a valid RFC 3066 language code, or an empty string.]

spellcheck Specifies whether the element should have its spelling checked.
Value Description
[Empty string] The element should have its spelling checked.
true The element should have its spelling checked.
false The element should not have its spelling checked.

If this attribute is missing, the element will use the default behavior, possibly based on the parent's own spellcheckstate.

style Specifies inline styles for the element. The value should be the style definition you wish to use.

 

tabindex Helps determine the tabbing order (when the user 'tabs' through the elements on the page).

Possible values:

[Any valid integer. For example, 0, 1, 2, 3, ...etc]

title Specifies a title to associate with the element. Many browsers will display this when the cursor hovers over the element (similar to a "tool tip").

Possible values:

[Any text to be displayed as a "tool tip".]

translate Specifies whether the element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.

The translateattribute is an enumerated attribute and may contain the following possible values:

  • [Empty String]
  • yes
  • no

If the translateattribute is provided, but its value is missing or is invalid, the element will inherit its value from its parent element.

 

 For Support