HTML Exercises - Using <div> Elements

In this exercise, we will practice using <div> elements to:

  • Specify a page layout - create different page sections.
  • Specify the content of a complex HTML component.

Exercises text

1. Using divs to specify a page layout (View the solution)

Create an HTML page that uses multiple <div> elements to specify a page layout. Create the following page sections:

  • Top navbar
  • Left sidebar
  • Main content wrapper
  • Right sidebar
  • Footer

2. Using divs to structure an HTML component (View the solution)

Create an HTML page that uses multiple <div> elements to create a complex HTML component, for example, a product card. Use <div> elements to create the following containers and sections:

  • The component's wrapper section
  • The component's header section
  • The component's body section
  • The component's links section

Solutions

1. Using divs for a page layout

The divs-exercise-01.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>
    <div id="top-navbar">
        <!-- The top navigation bar's content goes here -->
    </div>
    <div id="left-sidebar">
        <!-- The left sidebar's content goes here -->
    </div>
    <div id="main-content-wrapper">
        <!-- The main page content goes here -->
    </div>
    <div id="right-sidebar">
        <!-- The main page content goes here -->
    </div>
    <div id="footer">
        <!-- The footer content goes here -->
    </div>
</body>

</html>

Explanation

The page has multiple <div> elements used to specify the layout of our page. Each <div> element serves as a container/wrapper around a certain area on our page. Some divs serve as wrappers around navigation bar and sidebar areas, and other divs serve as containers for the main page content and the footer area. Since all areas are unique on a page, we can give each div an id attribute having a unique value.

You can expand on this exercise and wrap all divs with another, top-level, page-wrapper div:

<div id="page-wrapper">
    <div id="top-navbar">
        <!-- The top navigation bar's content goes here -->
    </div>
    <div id="left-sidebar">
        <!-- The left sidebar's content goes here -->
    </div>
    <div id="main-content-wrapper">
        <!-- The main page content goes here -->
    </div>
    <div id="right-sidebar">
        <!-- The main page content goes here -->
    </div>
    <div id="footer">
        <!-- The footer content goes here -->
    </div>
</div>

You can also put other elements inside divs, for example, you can place a list with links inside our top-navbar div:

<div id="top-navbar">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</div>

2. Using divs in an HTML component

The divs-exercise-02.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>
    <div class="card-wrapper">
        <div class="card-header">
            <!-- Card header content here -->
        </div>
        <div class="card-body">
            <!-- Card body content here -->
        </div>
        <div class="card-links">
            <!-- Card links content here -->
        </div>
    </div>
</body>

</html>

Explanation

This HTML page has an HTML component made up of multiple <div> (and other HTML) elements. This component can represent a product card of some kind, different pricing options, and similar. Divs are used to wrap around an entire component:

<div class="card-wrapper">

</div>

And to provide individual, inner sections of a component:

<div class="card-header">
    <!-- Card header content here -->
</div>
<div class="card-body">
    <!-- Card body content here -->
</div>
<div class="card-links">
    <!-- Card links content here -->
</div>

Since there can be multiple repeating HTML components on the same page, we use a class attribute instead of an id attribute for our divs.

You can expand on this exercise and put other HTML elements in different sections:

<div class="card-wrapper">
    <div class="card-header">
        <h2>Product Title</h2>
    </div>
    <div class="card-body">
        <p>Short product description.</p>
    </div>
    <div class="card-links">
        <a href="#">Download</a>
        <a href="#">Buy now</a>
    </div>
</div>

Summary

In this exercise, we practiced using multiple <div> elements to specify a page layout and an HTML component layout. If divs are unique on a page, we can add an id attribute. If they are repeating on a page, we opt for a class attribute instead.

For more information about the <div> element, check out our HTML divs tutorial.