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.