14 Global HTML Attributes, You Should Know

Meghanath Aviligonda
3 min readMay 29, 2023

--

These global attributes are attributes that can be used with all HTML Tags.

1.class : Class refers one or more class names for an element.

.paragraph{
color:gray;
}
<p class="paragraph ">Class information</p>

2.contenteditable : If user want edit the content of an element is editable.

we can use contenteditable attribute

<h2 contenteditable="true">This is an editable heading.</h2>

3.data-* : Use the data-* attribute to embed custom data:

<h2 data-color="pink">Custom attribute</h2>

4.dir : dir attribute refers the direction of the content inside the element

<p dir="rtl">Write this text right-to-left!</p>

5.draggble: The draggble attribute specifies whether an element is draggable or not.

<h2 draggable="true">This is heading</h2>

6.hidden :The hidden attribute is used to indicate that the content of an element should not be presented to the user.

<h2 hidden>This heading should be hidden.</h2>

7.id :Specifies a unique id for an element

<h2 id="heading">This is id element</h2>

8.lang : the language of the element’s content

<html lang="en"></html>

9.spellcheck :Specifies whether the element is to have its spelling and grammar checked or not.

<p spellcheck="true">This is a paragraph.</p>

10.style : Style attribute specifies the inline css style for an element.

<h2 style="color:pink">Style Attribute</h2>

11.tabIndex : Indicates the the tabbing order of an element.


<h2 tabindex="1">Red</h2><br>
<h2 tabindex="3">Blue</h2><br>
<h2 tabindex="2">Yellow</h2>

12.title :
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. The title attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).

<p title="About title">About title information</p>

13. translate : the content of an element should be translated or not

<p translate="no">Don't translate this!</p>
<p>This can be translated to other language.</p>

14.accesskey :The accesskey global attribute provides a hint for generating a keyboard shortcut for the current element.

<p>If you need to relax, press the
<strong><u>S</u></strong>tress reliever!</p>

<button accesskey="s">Stress reliever</button>

Conclusion :Global HTML attributes provide a set of attributes that can be used in almost any HTML element, regardless of its type or purpose. These attributes have a global scope and can be applied to various elements to enhance their functionality and behavior.

Global HTML attributes are valuable tools for web developers, offering flexibility, maintainability, and cross-browser compatibility.

Thanks a lot!, For reading the article.

--

--

Meghanath Aviligonda

I am frontend developer. I am working technologies HTML, CSS, JavaScript, Angular, React and some other tools