Nested HTML tags

In HTML, you can nest not only inline tags but also almost any other combination of tags.

For example, you can easily create a <div> tag to merge two paragraphs:

<div>
  <p> First nested paragraph. </p>
  <p> This is the second nested paragraph. </p>
</div>

This way when you apply some custom styling to the <div> tag, it will be applied to the nested <p> tags as well.

Multiple block elements can be placed inside some other block element - it all depends on the structure you have in mind.

You can also have multiple levels of nesting in HTML.

Here I’ve added 2 inline tags into the second paragraph to make part of it both bold and italicized.

<div>
  <p> First nested paragraph. </p>
  <p> And this is the second nested paragraph. <b><i> This text will be both bold and italicized</i></b> </p>
</div>

It is also possible to swap the <b> and <i> tags.

The result will remain the same.

<b><i> This text will be both bold and italicized</i></b>

However, you need to remember that not all tags can be nested within others.

For instance, the heading tag <h1> cannot be nested within the paragraph tag <p>.