Tag nesting

Now Muffin is satisfied. He really liked the updated design; he even purred. But additional changes can be made to this good design: we can add text, insert an image and play with fonts and spacing. You did a good job of fixing the website, and now you must add the finishing touches.

To do this, we will start with revising the text. The boss needs to add another paragraph to the section “Why choose me?” and to add one more item to the list “What will you learn?”

Paragraphs are added using the <p> tag, and list items are added using the <li> tag. These tags should be inserted inside other tags, so we will discuss the rules of nesting in more detail.

Other tags can be inserted inside paired tags. For example, this is true of lists:

<ul>
  <li>List item</li>
</ul>

Nested tags always need to follow the correct closing order. A nested tag cannot be closed after a parent tag:

<ul><li>List item</ul></li> <!-- Bad  -->
<ul><li>List item</li></ul> <!-- Good -->

Furthermore, not all tags can be nested inside other tags. For example, the tag <h1> that you are already familiar with cannot be nested inside <p>. You will gradually learn these nesting rules for each tag as you learn HTML.