Learning HTML elements and their application, shouldn’t be the end of the journey for developers. Especially frontend and web because there are things that go beyond, as they help to explore and stretch the potential of the various HTML attributes.
Global attributes in HTML5 refer to a number of attributes that are shared by all HTML5 elements. It must be known though that not all attributes will take effect when applied to elements.
In this article, we’re going to learn some of the most essential HTML attributes, their descriptions and the values that are expected to activate them.
Essential Attribute Reference
| Attribute | Description | Value |
accesskey | This attribute refers to keyboard shortcuts that are used to activate certain elements. Usually made up of a list of characters that are separated by space | shortcut key |
autocapitalize | This attribute is used to control whether the value of an input is capitalized and how. This value is usually text entered by a user. | off or none: no autocapitalization is applied (all letters default to lowercase) • on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase • words, the first letter of each word defaults to a capital letter; all other letters default to lowercase • characters, all letters should default to uppercase |
autofocus | This attribute is used to specify that there should be a focus on a specific element once the page loads. It is a boolean attribute | boolean, initially false |
class | This attribute specifies one or more class names for an element. A not-so-unique identifier for an element to enable easy reference to it. It also allows CSS and JavaScript to select specific elements for manipulation | class name: string |
contenteditable | This attribute is used to indicate whether the content of an element is editable by the user or otherwise | true or the empty string, which indicates that the element must be editable; • false, which indicates that the element must not be editable |
contextmenu | This attribute is used to specify a context menu for a specified element. ie. when the right mouse button is clicked on the element, a context menu appears | menu-id |
data-* | This attribute is used to specify custom data on any HTML element. This is usually data that is private or exclusive to a specific page or application | data |
dir | This attribute specifies the base direction of directionality of the element's text. Specifies the text direction for the content in an element. It is used to specify the text direction of the element content. An enumerated attribute indicates the directionality of the element's text | ltr: left to right, to be used for languages that are written from the left to the right (like English); • rtl: right to left, to be used for languages that are written from the right to the left (like Arabic); • auto: lets the user decide |
draggable | This attribute is used to specify whether an element is draggable or not. Certain elements such as links and images are draggable by default. Makes use of the Drag and Drop API | true: means element may be dragged false: means element may not be dragged |
dropzone | This attribute specifies whether the dragged data is copied, moved, or linked when dropped | copymovelink |
hidden | This attribute is used to define the visibility of elements. If true, the specified element won’t be rendered by the browser and will remain unseen | boolean |
id | This attribute is a unique identifier for an element to enable easy reference to that element. Also used by javaScript and CSS to perform a certain task on this unique element | string: characters |
lang | This attribute is used to specify the default language of an element. Usually seen in the head tag | language-code: en for English, fr for French etc. |
spellcheck | This attribute specifies whether the content or value should be checked for grammatical errors | true: means the element should be checked for spelling errors. false: means element should not be checked for spelling errors |
style | This attribute specifies styles to be applied to an element | object {in-line css} |
tabindex | When the tab key on a keyboard is being used to navigate the contents of a page, this attribute is used to show the order in which the tab should move through elements | negative number: means element should be focusable, but not reachable via sequential keyboard navigation 0: means element should be focusable and reachable via sequential keyboard navigation. positive number: means the element should be focusable and reachable via sequential keyboard navigation |
title | This attribute can be used to specify extra information about an element. The information is most often shown as a tooltip text when a mouse hovers on the element | string |
translate | In cases where the content of a page is being translated, this attribute can be used on any specific text or sentence to indicate whether or not it should be translated | yes, no |
Conclusion
The concept of global attributes is mostly overlooked because a lot of people are ignorant of how valuable it is to know about them. After learning the essential HTML elements, it’s ideal to know at least a few important global attributes. As a developer of the web, this will give you a lot of room to go deeper as you get to explore and stretch the potential of the various HTML attributes.