HTML Exercise - Headings

In this exercise, we will create an HTML page that has multiple headings.

Exercise text

Create an HTML page that has the following elements:

One level 1 heading - <h1>
Multiple level 2 headings - <h2>
Multiple level 3 headings - <h3>

Ensure that the different heading levels are listed in the proper order.

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>
</head>
<body>
    <!-- h1 heading -->
    <h1>This is a h1 heading</h1>
    <p>The above heading can be used to represent a main heading, a page title.</p>

    <!-- h2 heading -->
    <h2>This is a h2 heading</h2>
    <p>The above heading can be used to represent a section title.</p>

    <!-- h2 heading -->
    <h2>This is a h2 heading</h2>
    <p>The above heading can be used to represent a section title.</p>

    <!-- h3 heading -->
    <h3>This is a h3 heading</h3>
    <p>The above heading can be used to represent a subsection title.</p>
    
    <!-- h3 heading -->
    <h3>This is a h3 heading</h3>
    <p>The above element can be used to represent a subsection title.</p>

    <!-- h2 heading -->
    <h2>This is a h2 heading</h2>
    <p>The above heading can be used to represent a section title.</p>

</body>
</html>

Explanation

The above page has one main, level 1 heading that represents the main heading (title) for the content on our page, followed by a simple paragraph:

<h1>This is a h1 heading</h1>
<p>The above heading can be used to represent a main heading, a page title.</p>

Preferably, there should be only one <h1> element per page, and it serves as the main title for the content on our page.

Next, we have a level 2 heading, followed by a paragraph:

<h2>This is a h2 heading</h2>
<p>The above heading can be used to represent a section title.</p>

This level 2 heading represents a title for a section on our page. We also say the h2 heading represents a subtitle for a subsection on our page, depending on the naming conventions we want to use.

Following this code, we have another <h2> heading representing another (sub)title for another (sub)section within our page:

<h2>This is a h2 heading</h2>
<p>The above heading can be used to represent a section title.</p>

The proper headings order is respected, as all <h2> headings are listed after the <h1> heading.

Next, we create two subsection regions. We use the <h3> element as a subsection title, and a <p> element as a subsection's content:

<h3>This is a h3 heading</h3>
<p>The above heading can be used to represent a subsection title.</p>
<h3>This is a h3 heading</h3>
<p>The above element can be used to represent a subsection title.</p>

Here, the level 3 headings act as subtitles for content within a section. Notice how a level 3 heading comes only after a previous mention of the level 2 heading, somewhere in our code.

Finally, we create a third section on our page, by resuming the level 2 headings again:

<h2>This is a h2 heading</h2>
<p>The above heading can be used to represent a section title.</p>

Summary

In this exercise, we created a page that has multiple headings, and we opted to use three depth levels, from <h1> to <h3>. There is only one <h1> heading on our page, acting as a main page heading. Then, there are multiple <h2> headings, representing titles (or subtitles, depending on how you want to look at the page layout and structure) for different sections on our page. One such section has subsections represented through multiple <h3> headings. All headings should be listed in the proper order - avoid headings order skipping; for example, do not mention <h3> right after the <h1> heading and similar. Multiple headings are used by search engines and screen readers, and they can be used to represent the document's structure and contextual layout.

For more in-depth information about different kinds of headings in HTML, check out our HTML headings tutorial.

In our next HTML exercise, we will create a page with different kinds of link elements.