Ophy Boamah
Ophy Boamah's Blog

Ophy Boamah's Blog

HTML5 Global Attributes

HTML5 Global Attributes

Learn an essential yet overlooked part of HTML5

Ophy Boamah's photo
Ophy Boamah
·Jul 8, 2022·

5 min read

Play this article

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

AttributeDescriptionValue
accesskeyThis attribute refers to keyboard shortcuts that are used to activate certain elements. Usually made up of a list of characters that are separated by spaceshortcut key
autocapitalizeThis 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
autofocusThis attribute is used to specify that there should be a focus on a specific element once the page loads. It is a boolean attributeboolean, initially false
classThis 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 manipulationclass name: string
contenteditableThis attribute is used to indicate whether the content of an element is editable by the user or otherwisetrue or the empty string, which indicates that the element must be editable; • false, which indicates that the element must not be editable
contextmenuThis 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 appearsmenu-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 applicationdata
dirThis 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 textltr: 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
draggableThis 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 APItrue: means element may be dragged false: means element may not be dragged
dropzoneThis attribute specifies whether the dragged data is copied, moved, or linked when droppedcopymovelink
hiddenThis attribute is used to define the visibility of elements. If true, the specified element won’t be rendered by the browser and will remain unseenboolean
idThis 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 elementstring: characters
langThis attribute is used to specify the default language of an element. Usually seen in the head taglanguage-code: en for English, fr for French etc.
spellcheckThis attribute specifies whether the content or value should be checked for grammatical errorstrue: means the element should be checked for spelling errors. false: means element should not be checked for spelling errors
styleThis attribute specifies styles to be applied to an elementobject {in-line css}
tabindexWhen 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 elementsnegative 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
titleThis 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 elementstring
translateIn 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 translatedyes, 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.


References:

Total Republic

MDN

W3schools

 
Share this