Exercise - Sections and Semantic Elements

In this exercise, we will use several semantic HTML elements to create various sections on our web page.

Exercise text

Create a HTML page that uses semantic HTML elements to create the following sections on our page:

A header section.
The top navigation bar section.
The left sidebar navigation section.
The main section.
The footer section.

Inside the main section, use the appropriate semantic HTML element to represent a wrapper around an article.

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>
    <!-- The header section -->
    <header>
        <img src="mylogo.png" alt="Brand Logo" width="50" height="50">
        <span>Company Name</span>
        <!-- The top navigation bar section -->
        <nav>
            <ul>
                <li><a href="#">Category Link 1</a></li>
                <li><a href="#">Category Link 2</a></li>
                <li><a href="#">Category Link 3</a></li>
            </ul>
        </nav>
    </header>

    <!-- Left sidebar -->
    <nav>
        <ul>
            <li><a href="#">Left Sidebar Link 1</a></li>
            <li><a href="#">Left Sidebar Link 2</a></li>
            <li><a href="#">Left Sidebar Link 3</a></li>
        </ul>
    </nav>

    <!-- The main section -->
    <main>
        <!-- The article section -->
        <article>
            <h1>The article title</h1>
            <p>The first paragraph in an article</p>
            <p>The second paragraph in an article</p>
        </article>
    </main>

    <!-- The footer section -->
    <footer>
        <!-- The footer content -->
        <h2>Company Name</h2>
        <p>Copyright statement.</p>
        <h2>Quick Links</h2>
        <ul>
            <li><a href="#">Quick Link 1</a></li>
            <li><a href="#">Quick Link 2</a></li>
            <li><a href="#">Quick Link 3</a></li>
        </ul>
    </footer>

</body>

</html>

Explanation

Our page uses several semantic HTML elements to represent different sections on our web page.

The header section

The <header> element is an element that carries a semantic meaning and represents the header section on our HTML page. Currently, it holds an image, a short inline text, and a top navigation bar:

<header>
    <img src="mylogo.png" alt="Brand Logo" width="50" height="50">
    <span>Company Name</span>
    <!-- The top navigation bar section -->
    <nav>
        <ul>
            <li><a href="#">Category Link 1</a></li>
            <li><a href="#">Category Link 2</a></li>
            <li><a href="#">Category Link 3</a></li>
        </ul>
    </nav>
</header>

Note: Replace mylogo.png with your image file name.

The navigation sections

We used the semantic <nav> element to represent a navigation area on our page. Our page has two navigation sections.

The first is a top navigation bar placed inside the <header> section:

<header>
    <!-- The top navigation bar section -->
    <nav>
        <ul>
            <li><a href="#">Category Link 1</a></li>
            <li><a href="#">Category Link 2</a></li>
            <li><a href="#">Category Link 3</a></li>
        </ul>
    </nav>
</header>

The second navigation section is a sidebar section, also represented through the <nav> element. This time, the <nav> element is placed inside the <body> section, after the <header> section:

<!-- Left sidebar -->
<nav>
    <ul>
        <li><a href="#">Left Sidebar Link 1</a></li>
        <li><a href="#">Left Sidebar Link 2</a></li>
        <li><a href="#">Left Sidebar Link 3</a></li>
    </ul>
</nav>

The `<main>` section holding an `<article>` section

Next, we use the semantic <main> element to represent the main section on our web page. The main section wraps around the main content on our page. Inside the main section, we used the semantic <article> element as a wrapper around the main article on our page.

<!-- The main section -->
<main>
    <!-- The article section -->
    <article>
        <h1>The article title</h1>
        <p>The first paragraph in an article.</p>
        <p>The second paragraph in an article.</p>
    </article>
</main>

The footer section

Finally, we used the semantic <footer> element to represent a footer section on our web page. In our example, the footer section holds a subtitle, a copyright statement and some quick links.

<!-- The footer section -->
<footer>
    <!-- The footer content -->
    <h2>Company Name</h2>
    <p>Copyright statement.</p>
    <h2>Quick Links</h2>
    <ul>
        <li><a href="#">Quick Link 1</a></li>
        <li><a href="#">Quick Link 2</a></li>
        <li><a href="#">Quick Link 3</a></li>
    </ul>
</footer>

Summary

In this exercise, we used semantic HTML5 elements to represent different sections on our page.