07. Divs and Nesting

Introduction

In this lesson, you will learn a little about divs, and about the concept of nesting HTML elements.

Learning Outcomes

By the end of this lesson, you should be able to:

  • Identify what a div tag looks like
  • Explain the concept of nesting

Divs

A ‘div’ refers to the <div></div> tag. These are the building blocks of modern HTML.

A div is just a box. Wrapping sections of your website in a div makes it easier to manipulate your CSS down the line.

<div> <p>This is my paragraph!</p> </div>
Code language: HTML, XML (xml)

By default (without any styling) a div takes up the full width of a webpage.

Divs are difficult to conceptualize without seeing them in action, and even harder to conceptualize without CSS, so we will be going into more detail in the CSS section.

For now, just keep in mind that divs are important. As we continue along the sections, the reasoning will become clear.

Nesting

We already saw an example of nesting when we talked about linking images. Nesting especially comes in handy when working with divs. Here, I’ll show you an example.

See the Pen Nesting by Sadness (@sadness97) on CodePen.

The above example has some styling, only for demonstration purposes. The styling is meant to make it clearer to see how nesting works.

In this example, the outer div is red, the middle div is orange and the inner div is yellow.

Divs aren’t the only thing you can nest – you can nest a list inside of another list. This makes it easy to include subitems, like so:

See the Pen List Nesting by Sadness (@sadness97) on CodePen.

A bunch of different elements might be nested within the same div, like the example below:

See the Pen Nesting 2 by Sadness (@sadness97) on CodePen.

It’s not pretty, but hopefully it gets the point across.

I took special care to indent the HTML so it’s easy to read, so take a moment to look over my Pen (and remember, you’re free to change the code as you wish!)



Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.