HTML banner image.

The modern browser is very forgiving of HTML errors, but only up to a point. It is critical that you code your HTML accurately at all times and remember that just because it “works” does not mean it is correct.

When I think of correctly nested HTML tags, I think of the Russian Matryoshka dolls where the doll fits into a larger doll which in turn fits into an even larger doll, etc.

<b><i>This will work, but the tags are not nested correctly.</b></i>
<i><b>This is correct...</b></i>
<b><i>...and so is this.</i></b>

It is important to understand that some of the tags are structural and some are not. In the below example, the <p> tags create a structural element, the paragraph, whilst the <i> tags do not add structure, just meaning. The non-structural tags should always be nested inside the structural tags.

<i><p>This will work, but is incorrectly nested.</p></i>
<p><i>This is correctly nested.</i></p>

The code below will work, but is incorrect:

<font face="Arial" color="#FF9900">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
</font>

It should be:

<p><font face="Arial" color="#FF9900">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</font></p>

<p><font face="Arial" color="#FF9900">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</font></p>

The correct code is repetitive and cumbersome — and that is exactly why CSS evolved!

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.