Exercise - Global Attributes

In this exercise, we will practice applying several global attributes to HTML elements on our page.

Exercise text

Create a HTML page with several HTML elements, and apply global attributes to these elements. Use the following attributes:

The id attribute.
The class attribute.
The title attribute.

Use the id attribute to provide internal document navigation and to apply a custom CSS rule. Use the class attribute to apply custom CSS rules. Use the title attribute to provide the tooltip text for a link element.

Solution

The index.html file:

<!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-id {
            color: green;
        }
        .my-paragraph {
            color: gray;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- Using the global id attribute for internal navigation -->
    <h1 id="page-title">The main page title</h1>
    <p>The following is a list of topics on this page:</p>
    <ul>
        <li><a href="#page-title">Home</a></li>
        <li><a href="#topic-1">Topic 1</a></li>
        <li><a href="#topic-2">Topic 2</a></li>
        <li><a href="#sub-topic-21">Sub-topic 2.1</a></li>
    </ul>

    <h2 id="topic-1">Topic 1</h2>
    <p>Sample paragraph text for topic 1.</p>
    <h2 id="topic-2">Topic 2</h2>
    <p>Sample paragraph text for topic 2.</p>
    <h3 id="sub-topic-21">Sub-Topic 2.1</h3>
    <p>Sample paragraph text for sub-topic 2.1.</p>

    <!-- Using the global id attribute for CSS styling -->
    <h2 id="my-id">This heading is styled using a CSS id selector</h2>

    <!-- Using the global class attribute for CSS styling -->
    <p class="my-paragraph">This paragraph uses a global class attribute to apply CSS styling.</p>
    <p class="my-paragraph">This paragraph also uses a global class attribute to apply CSS styling.</p>

    <!-- Using a global title attribute to provide a tooltip text -->
    <a href="#page-title" title="Navigate to the top of the page.">This link has a tooltip text</a>

</body>
</html>

Explanation

In our web page, we used three different kinds of global attributes for different purposes. Let us start with the id global attribute.

The `id` attribute

We applied the global id attribute to all our headings:

<h1 id="page-title">The main page title</h1>
<!-- Other content... -->
<h2 id="topic-1">Topic 1</h2>
<!-- Other content... -->
<h2 id="topic-2">Topic 2</h2>
<!-- Other content... -->
<h3 id="sub-topic-21">Sub-Topic 2.1</h3>
<!-- Other content... -->
<h2 id="my-id">This heading is styled using a CSS id selector</h2>

Now, every heading element has a unique id value. This allows us to create internal document navigation, where each link points to the location of a heading with the given id value:

<ul>
    <li><a href="#page-title">Home</a></li>
    <li><a href="#topic-1">Topic 1</a></li>
    <li><a href="#topic-2">Topic 2</a></li>
    <li><a href="#sub-topic-21">Sub-topic 2.1</a></li>
</ul>

The id global attribute also allows us to apply a CSS styling defined using a matching CSS id selector. We define a CSS id style rule inside the <style> element in our <head> section:

<head>
    <style>
        #my-id {
            color: green;
        }
    </style>
</head>

Now, the HTML element that has an ID of my-id will have this CSS rule applied to it.

The class global attribute

We applied the global class attribute to several paragraphs on our page:

<p class="my-paragraph">This paragraph uses a global class attribute to apply CSS styling.</p>
<p class="my-paragraph">This paragraph also uses a global class attribute to apply CSS styling.</p>

This allows us to apply CSS rules defined earlier inside our <style> element:

<head>
    <style>
        .my-paragraph {
            color: gray;
            font-size: 20px;
        }
    </style>
</head>

This CSS rule uses the class selector of .my-paragraph to specify a set of CSS rules that will be applied to all HTML elements having the class attribute with a my-paragraph value.

Note: In production, CSS rules are usually stored in a dedicated .css file which then gets included into our HTML page. For the sake of simplicity, we defined all our CSS rules inside the <head><style> section in our HTML document.

The title attribute

Finally, we applied the title global attribute to our link element <a>, which allows us to see a tooltip text when we hover the mouse over our link:

<a href="#page-title" title="Navigate to the top of the page.">This link has a tooltip text</a>

Summary

In this exercise, we used several global attributes (id, class, and title) that can be applied to any HTML element on our page. We utilized those attributes to:

Create internal page navigation links.
Apply CSS rules.
Show tooltip text.