In this lesson, you will learn a little about divs, and about the concept of nesting HTML elements.
By the end of this lesson, you should be able to:
- Identify what a div tag looks like
- Explain the concept of nesting
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.
Code language: HTML, XML (xml)
<div> <p>This is my paragraph!</p> </div>
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.
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.
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:
A bunch of different elements might be nested within the same div, like the example below:
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!)