Global Attributes

Global attributes are attributes that can be applied to all HTML elements. In this article, we explain the following widely used global attributes:

The id attribute - specifies a unique ID value for the element.
The class attribute - specifies a class name for the element.
The title attribute - specifies a title text for the element.
The data-* attributes - specify a set of data attributes for the element.

The id attribute

The id attribute stores a unique ID string value that uniquely identifies an element on a page. There can only be one unique ID value per page. No two or more elements can have the same ID value. The general syntax for the id attribute is:

<element_name id="some-unique-value"></element_name>

To create a heading element with a unique ID value, we write:

<h1 id="my-page-title">This is the page title</h1>

This code defines a <h1> element with a unique ID value of my-page-title.

To define a unique <div> element on a page, we add an id attribute with a unique value:

<div id="my-wrapper-id">
    <!-- The div's content -->
</div>

We can also have multiple HTML elements of the same type, but with unique IDs. Example:

<h2 id="chapter-1">Chapter 1</h2>
<h2 id="chapter-2">Chapter 2</h2>
<h2 id="chapter-3">Chapter 3</h2>

The above code snippet defines multiple <h2> elements, and gives each element a unique ID value, specified by the global id attribute.

Important: All id attribute values on a page must be unique.

Use-cases for the `id` attribute

Applying a CSS rule

The global id attribute can be used to apply a CSS rule, using a CSS id selector. The CSS selector starts with the # symbol, followed by an id string. Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <style>
        #my-unique-id {
            color: blue;
        }
    </style>
</head>
<body>
    <h2 id="my-unique-id">This text is styled using the CSS id selector</h2>
</body>

</html>

Here, we used the CSS ID selector to specify a rule that will be applied to an element that has this ID value. In our case, it is the <h2> element with an id attribute having the value of my-unique-id. In the above example, the <h2> element has its text color set to blue.

The CSS ID selector starts with a # symbol, followed by an id value, and one or more CSS rules inside braces:

#some-unique-id {
    /*One or more
    CSS rules here*/
}

Using the element's id in a JavaScript

The element's id attribute can be utilized by a JavaScript code to obtain a handle of that element. We use the document's getElementByID() method to obtain a handle of an element with a given ID value:

const elementHandle = document.getElementById('my-unique-id');
console.log("The element's ID is:", elementHandle.id);

The above code obtains an element's handle and prints the value of that element's id.

The following page defines a <h1> element with a given id attribute value, and uses the JavaScript to obtain the handle of that element:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>

<body>
    <h1 id="my-unique-id">This is a h1 element with a unique ID.</h1>

    <script>
        const elementHandle = document.getElementById('my-unique-id');
        console.log("The element's ID is:", elementHandle.id);
    </script>
</body>

</html>

Creating internal document links

The id attribute can be used when creating internal document links. Example:

<!-- Internal links: -->
<ul>
    <li><a href="#main-title">Main page content</a></li>
    <li><a href="#chapter-1">Chapter 1</a></li>
    <li><a href="#subchapter-1-2">Subchapter 1.2</a></li>
    <li><a href="#chapter-2">Chapter 2</a></li>
</ul>

<!-- Elements with different IDs: -->
<h1 id="main-title">Internal document links</h1>
<h2 id="chapter-1">Chapter 1</h2>
<h3 id="subchapter-1-2">Subchapter 1.2.</h3>
<h2 id="chapter-2">Chapter 3</h2>

First, we create a number of HTML elements, each with a different id attribute value. Then, we create multiple link elements and set their href attributes to the values of these ids, preceded by an # symbol. This way, when we click on the link, the page scrolls down to the location of the pointed-to element whose id value matches the link's href value.

In summary, we use some regular string to specify a unique value for an element:

<h2 id="some-unique-id">Some heading text</h2>

And, in a link's href attribute, we add the # symbol in front of the ID value:

<a href="#some-unique-id">A link to the element</a>

The class attribute

The class attribute specifies one or more class names for an element. The general syntax is:

<element_name class="some-class-name"></element_name>

To apply a single class name to, for example, a <div> element, we write:

<div class="some-class-name">
    <!-- The div's content -->
</div>

There can be multiple elements of the same type sharing the same class name on a page:

<div class="some-class-name">
    <!-- The div's content -->
</div>

<div class="some-class-name">
    <!-- The div's content -->
</div>

The following example shows a class attribute applied to several common elements of different kinds:

<h1 class="some-class-name">The heading text</h1>
<h2 class="some-class-name">The subheading text</h2>
<p class="some-class-name">The paragraph text.</p>

To assign multiple class names to a single element, we use space-separated class names as values for the class attribute:

<div class="class-name-1 class-name-2">
    <!-- The div's content -->
</div>

Use-cases for the `class` attribute

Applying a CSS rule

The class attribute can be used to apply CSS rules specified inside a CSS class selector. This rule will be applied to all HTML elements having a given class name. Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <style>
        .some-class-name {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>The page title</h1>
    <p class="some-class-name">This paragraph is styled using the CSS class selector.</p>
    <div class="some-class-name">This container is also styled using the same CSS class rules.</div>
</body>

</html>

In CSS, the class selector starts with a . symbol, followed by a class name, and a list of one or more CSS rules inside braces. Example:

.some-class-name {
    /* One or more
    CSS rules here
    */
}

Obtaining a handle through the class attribute

Using JavaScript code, we can utilize the class attribute's value to obtain a collection of all HTML elements that share the same class name. We use the document.getElementsByClassName(''); method which accepts one or more class names and returns a collection of all elements that have a given class name. Example:

const elementsCollection = document.getElementsByClassName('some-class-name');
for (const element of elementsCollection) {
    console.log(element.innerHTML);
}

The `id` and `class` attributes, which one to choose?

Which attribute to choose for an element on a page, id or a class attribute? If you know for sure that there will only be one element with that unique ID on a page, use the id attribute. For example, if there is going to be only one sidebar on a page, use the id attribute on an element that wraps that sidebar:

<div id="sidebar">
    <!-- Sidebar's content -->
</div>

When elements repeat on the page, we opt for the class attribute. With the class attribute, we can have multiple, repeating elements on the page, all sharing the same class name.

While we can have only one element with a given unique id attribute value, we can have multiple elements with the same class attribute values:

<div class="some-wrapper-name">
    <!-- The div's content -->
</div>

<div class="some-wrapper-name">
    <!-- The div's content -->
</div>

The title attribute

The title attribute specifies text that is displayed as a tooltip when we hover over the HTML element on a page. The general syntax is:

<element_name title="This text shows up in a popup tooltip"></element_name>

To add a title attribute to, for example, a link element, we write:

<a href="https://www.example.com" title="Click here to be taken to the example.com website">Link text</a>

Now, when we hover over the link, the browser shows a tooltip showing the text from the title attribute.

The custom data-* attributes

The custom data-* attributes allow us to put custom data/information into our HTML element and manipulate that data in a JavaScript code.

The * part of the data attribute name means we can name that part anything we like, as long as it:

Does not start with xml.
Does not have a : symbol.
Does not have capital letters.

Our data attribute can be named as data-anyname, as long as the "anyname" part follows these rules.

The general syntax for the data-* attribute is:

<element_name data-some-name="Some data value"></element_name>

To add a single data-* attribute to our element, we write:

<div data-id="123">
    This element stores a data value of 123.
</div>

If we want our element to store a differently named data attribute, for example, a data-name attribute, we write:

<div data-name="Sample Name">
    This element stores a data value of Sample Name.
</div>

Now, our element has a data attribute named data-name, and, in our case, it is used to store a name value of some kind.

To store multiple data-* attributes in a single HTML element, we separate the attributes with a space:

<div data-id="123" data-name="Sample Name">
    This element stores two data values.
</div>

To access and manipulate data attributes in a JavaScript code, we utilize the HTMLElement interface and its .dataset property. We can both read and write the attribute's value using JavaScript. For a HTML element defined as:

<div data-id="123" id="my-element">
    This element stores some ID data.
</div>

The JavaScript code that reads and prints the value of a data-id attribute looks like the following:

const element = document.getElementById('my-element');
// Get the data-id attribute's value using the dataset.id field
let attributeValue = element.dataset.id;
console.log("The element's data attribute value is:", attributeValue);

In JavaScript, the data- part of our HTML attribute name is removed and the remaining part is converted from kebab-case to camelCase. So, our HTML attribute name of data-id, in JavaScript becomes id (accessible through dataset.id). The HTML attribute name of data-my-name, in JavaScript becomes myName (accessible through dataset.myName) and similar.

To change the data-* attribute's value, we use the following JavaScript code:

const element = document.getElementById('my-element');
// Set the data-id attribute's value
element.dataset.id = 'New attribute value';
console.log("The element's data attribute value is:", element.dataset.id);

In summary, the data-* attributes enable us to store additional information in our HTML elements and then use that data in a JavaScript for both reading and writing purposes.

Global Attributes

The id attribute

Use-cases for the id attribute

Applying a CSS rule

Using the element's id in a JavaScript

Creating internal document links

The class attribute

Use-cases for the class attribute

Applying a CSS rule

Obtaining a handle through the class attribute

The id and class attributes, which one to choose?

The title attribute

The custom data-* attributes

Use-cases for the `id` attribute

Use-cases for the `class` attribute

The `id` and `class` attributes, which one to choose?