Lesson 10
Nesting and Indenting
What is nesting?
Now that you’ve been introduced to the basic tags of a website, it’s time to start figuring out how they all relate to each other. Each tag acts like a container. Think of it like nesting dolls.
A nesting doll has a top half and a bottom half, just like an opening and closing tag. But is that the end of it? No! There are more dolls nested inside. HTML tags work the same way, only tags act more like boxes than dolls. You can place tags inside each other. This helps things stay organized and grouped together.
How does indenting work?
One way people organize code is by indenting it. This helps coders see which boxes are inside of which. To show that an HTML element is inside of another one, you put it on a new line and indent it (by pressing the TAB key on your keyboard).
<div>
<p>
<b>
</b>
</p>
</div>
Are you ready to learn?
Below we have lots of HTML tags, and some of them are nested inside each other. It’s hard to tell, though, so you need to indent the code to show which HTML elements are which.
- Indent the code in the HTML box to show it’s nested correctly
- Use the boxes in the output as a guide to see how the boxes are inside of each other