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 an 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.