In this section, we will learn what global attributes are and how to use them.

What is an Attribute in HTML?

Attributes are a set of keywords we add to the opening tag of HTML elements and are used to add new behaviors to elements.

Some attributes take values, but some don’t!

For example, there’s an attribute called `required` that we mainly used in HTML <input> elements to require users to fill a specific field. This means after using this attribute in an HTML element like <input>, if a user didn’t fill that target field, an error will appear on their screen asking to fill the field. This attribute is only needed in the opening tag of an HTML element. But it doesn’t need a value!

On the other hand, we have attributes like `placeholder` where we need to set a value for it.

Setting values for attributes mainly relates to the nature of those attributes. For example, the `placeholder` attribute is used mainly in HTML <input> elements like textbox to show users what type of content they can put in that field.

So yeah, some attribute takes values but some don’t.

HTML Global Attributes

Global attributes in HTML are those that can be applied to any HTML element! Basically, these attributes are general enough that you could use them in any HTML element.

In HTML, there are elements that take a set of especial attributes (that are only applicable to those elements).

For example, HTML <input type = “text”> has an attribute called “placeholder”. As mentioned before, this placeholder takes a value and shows that in the textbox field to help users know how to fill the target field.

This attribute is not applicable to an HTML element like <p> which is used to create a paragraph in HTML! Because after all, people are not going to fill a paragraph and hence no need for the “placeholder” attribute in such element.

On the other hand, we have global attributes! These attributes are useful in any HTML element out there and that’s why it is called a global attribute.

For example, one of these global attributes is called `id`. As the name suggests, the `id` attribute is used to give a unique id to an HTML element. Basically, this attribute is used to identify elements in an HTML document.

In other languages like CSS and JavaScript, then we can use the `id` attribute to access the target owner of a specific id-value and apply any necessary changes.

For example, let’s say you have two paragraphs created via the <p> element. Both elements have the id attribute. The first one gets the value “p1” and the second one gets the value “p2” as:

<p id = “p1”> …. </p>

<p id = “p2”> … </p>

Now in JavaScript for example, there is a method called “getElementById()” by which we can easily put the id value of any HTML element, and bring that element into JavaScript to work with.

So as you can see, the `id` attribute is a global attribute because it can be used in any HTML element.

Other than the `id` attribute, there are multiple useful global attributes and in the rest of this section you’ll learn more about them.

List of Global HTML Attributes

Here’s the list of global attributes that are applicable to every HTML element.

Name	Description
accesskey	Using this attribute, we can set a shortcut key to access the target element.
class	Using this attribute, we can set a class name for an HTML element into a specific class.
contenteditable	Using this attribute, we can specify whether the content of the target element is editable or not.
data-*	In HTML, we can create a custom attribute and store values in them too. This is the format for creating a custom attribute in HTML.
dir	This attribute is used to set the text direction of the content in the target element.
draggable	Using this attribute and little help from JavaScript, we can turn an HTML element into draggable.
hidden	This attribute is used to set that an element is not yet, or is no longer, relevant
id	This attribute is used to set an id value for an HTML element.
lang	Using this attribute, we can set the language of an HTML element’s content.
spellcheck	This attribute is used to set if the target element should be checked for spell and grammar.
style	Using this attribute, we can directly add CSS style (AKA inline style) to an HTML element.
tabindex	This attribute specifies the tabbing order for an element.
title	Using this attribute, we can set a title for the target HTML element.
translate	This attribute specifies whether the content of the target element should be translated or not.