1. What are HTML Global Attributes?
The HTML attributes are special keywords that we incorporate inside HTML tags or elements to enhance their ability or functionality. Most of the attributes are specifically defined for targetted HTML elements only. However, certain HTML attributes are globally accepted and we can employ them on any HTML5 element. The below table contains an up-to-date and ultimate list of all the global HTML attributes and we can utilize them with all HTML5 elements.
1.1. Application of HTML Global Attributes
- In addition, the global attributes apply to any HTML element even those which are not standard HTML5 tags.
- This means that any non-standard HTML element must and do permits the usage of global attributes.
- However, applying global attributes to non-standard HTML elements might lead the document invalid for HTML5 standards.
- Thus, the HTML5-compliant browser will render the global attributes although they lose the standard HTML5 practice.
- For instance, <custom-element hidden></custom-element> custom HTML element will become hidden even in HTML5-compliant browsers.
2. HTML Global Attributes Reference
The following table serves as a guide and reference to all the HTML global attributes along with a short description. Moreover, the global HTML attributes are listed alphabetically.
2.1. Global HTML5 Attributes Alphabetical Reference
Attribute | Description |
accesskey | This global HTML accesskey attribute creates a shortcut key to focus on an element. |
aria-* | The global HTML aria-* attributes allow us to customize the properties and states of a tag. |
autocapitalize | This global HTML autocapitalize attribute sets the input automatically capitalize when entered by the user. |
autofocus | The global HTML autofocus declares the auto focus an element upon loading the page. |
class | This global HTML class attribute defines one or more classes for an element. |
contenteditable | The global HTML contenteditable attribute if this attribute is set to "true" for an element, and the content of the element is editable by the user. |
contextmenu | This global HTML contextmenu attribute defines the ID of a menu element which will serve as the element’s context menu. |
data-* | The global HTML data-* attribute stores the private data of a page or application. |
dir | This global HTML dir attribute declares the direction of the text in an element. |
draggable | The global HTML draggable attribute, if set to "true" for an element, the element is draggable on the screen. |
enterkeyhint | This global HTML enterkeyhint defines a label or icon when some key is pressed on the virtual keyboard. |
exportparts | The global HTML exportparts attribute transitively exports shadow parts from a nested shadow tree into a containing light tree. |
hidden | This global HTML hidden attribute makes an element irrelevant and hides it. |
id | The global HTML id attribute sets the ID for an HTML element. |
inputmode | This global HTML inputmode attribute tells the browser about the type of virtual keyboard configuration to use while editing the current element or its content. This is useful with the <input> tag however we can utilize it with every element with a contenteditable attribute. |
is | The global HTML is attribute enables the specification of a standard HTML element as a custom registered HTML tag. |
itemid | This global HTML itemid acts as a unique global identifier for an element. |
itemprop | The global HTML itemprop attribute adds properties to an element. |
itemref | This global HTML itemref allows us to associate the descendent properties to an element. |
itemscope | The global HTML itemscope attribute works with itemtype and specifies that the HTML contained inside a block relates to a particular item that it creates. |
itemtype | This global HTML itemprop attribute is used to specify the URL vocabulary of the itemprops in the data structure and the scope to become active is set by the itemscope attribute. |
lang | The global HTML lang attribute defines the language of the document. |
nonce | This global HTML nonce attribute sets a cryptographic nonce that is utilized by Content Security Policy(CSP), to check if the current fetch is allowed to proceed further. |
part | The global HTML part attribute creates a space-separated list of names of an element which allows CSS language to select and style specific elements in a shadow tree by employing the ::part pseudo-class. |
role | This global HTML role attribute sets a role for an element while interacting with assistive technologies. |
slot | The global slot HTML attribute assigns a slot in a shadow DOM shadow tree to an element. |
spellcheck | This global HTML spellcheck attribute checks the spellings of text inside an element. |
style | The global HTML style attribute assigns a class to an element. |
tabindex | This global HTML tabindex attribute sets the tabbing order of an element. |
title | The global HTML title attribute provides some extra information to the element that pops up upon hovering on the element. |
translate | This global HTML translate attribute tells the browser whether to translate the content of the element or not. |
xml:lang | The global HTML xml:lang attribute specifies the language of the text enclosed by an element. It is inherited from the XML language. |
xml:base | This global HTML xml:base attribute enables redefining the base address used by relative addresses in the child elements. It is also inherited from the XML language. |
3. HTML Event Handler Global Attributes
The event handler attributes in HTML are also global and we can employ them on all HTML5 elements. The list below contains all the HTML event handler global attributes alphabetically.
3.1. Global HTML5 Event Handler Attributes Alphabetical Reference
- onabort
- onabort
- onafterprint
- onbeforeprint
- onbeforeunload
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- oncopy
- oncuechange
- oncut
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onhashchange
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onoffline
- ononline
- onpagehide
- onpageshow
- onpaste
- onpause
- onplay
- onplaying
- onpopstate
- onprogress
- onratechange
- onreset
- onresize
- onscroll
- onsearch
- onseeked
- onseeking
- onselect
- onshow
- onstalled
- onstorage
- onsubmit
- onsuspend
- ontimeupdate
- ontoggle
- onunload
- onvolumechange
- onwaiting
- onwheel
Further Reference Tutorials
- What are HTML attributes? Visit Tutorial
- List of all HTML attributes. Visit Tutorial
- What are HTML deprecated attributes? Visit Tutorial
- Know about the HTML event attributes. Visit Tutorial