HTML5 Nesting Tags with Examples: If you see any web page that contains HTML elements inside HTML elements which are known as nested elements which are essential to building any web page.
Purpose of Nesting HTML5 Tags
The best way to understand nesting HTML elements is provided with boxes that hold the content. This content may be text or images and these HTML tags are the boxes that present around the content. In some cases, you may need to provide boxes inside the boxes that are called “Nested”.
Nesting HTML5 Tags Example
Here we are providing an example of a paragraph with some bold text.
Example: This is a sentence of text.
This text is written as in HTML code.
<p>Example:This is a sentence of text.</p>
Now you want to add bold to the word “sentence” in the above text
<p>Example: This is a <strong>sentence</strong> of text.</p>
Hence this the simple example of nested tags because we created a paragraph tag <p>, </p> to specify some text and that text contains a bold word which can be defined with the help of <strong></strong> tag.
Multiple Nested Tags in HTML5
In HTML we have different types of tags for a particular style. If you want to add bold and italic to your content then the following example will be more helpful.
Multiple Nested Tags Example
<p>Example: This is a <strong>sentence</strong> of text and it also has some <em>italicized text</em> too.</p>
You can see the text as given below.
This is a sentence of text and it also has some italicized text too.
In the above example, we used paragraph tag, bold tag, emphasize tag which displays text as italic font.
Why should we use Nested Tags
The main reason to use nested tags in case if you want to create a web page using CSS that depends on tags to be consistently nested inside the document to specify where the style starts and where the style ends.
Nesting HTML Tags Example with Link
<div class="main-content"> <p>Example: This is a <strong>sentence</strong> of text and it also has some <em>italicized text</em> too.</p> <p>This is <a href="/index.html">another paragraph</a>.</p> </div>
Here we have used the above example but added a link to it and if you want to write that in CSS that will impact the link which is within the division.
The other reason for nested tags is browser compatibility and accessibility. In case if you wrongly nested the HTML elements then it won’t allow for old web browsers and screen readers and it will disturb the visual appearance of the web page.
NOTE: Try to add some more tags and experience the magic of nested tags.