Nesting HTML Tags (Elements) Inside Other Tags

HTML Nesting is the concept of putting HTML tags inside other HTML tags. Nesting is used to add additional formatting to elements located within already defined tags in order to customize or modify their appearance.

In the previous HTML tutorial we learned about the basic HTML tags such as the Paragraph tag P, which creates simple paragraphs of text.

But what if we want to make parts of the text inside the paragraph to be bold? It turns out that HTML allows us to place tags inside other tags to modify appearance of visual elements we'd like to create.

Consider the following example.

<p>Open the <b>Notepad</b> text editor to enter HTML code.</p>

In the example above the word Notepad will appear to be bold when viewed in a web browser because we "nested" two B tags (stands for bold text) inside the paragraph tags, effectively making it stand out from the rest of words.

Can you do it the other way and nest the P tag inside of the B tag?

<b><p>This entire line will appear bold when viewed in a browser</p></b>

Yes, it will work this way too, but so will many other things that may not be considered to be structurally logical. Try to follow a logical order when nesting HTML tags.

First we create a paragraph and then we choose to make the text inside that paragraph bold. This means that the example where B is nested inside P (and not the other way around as shown above) is a more proper way of thinking about nesting HTML tags.

Nesting HTML Lists (OL, UL and LI)

As explained in my previous tutorials, HTML Nesting is the process of placing HTML tags inside other HTML tags.

Here is a simple example of how to nest an ordered list (OL) inside another ordered list. The same logic can be applied to other types of lists, for example an unordered list (UL).

<ol>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three (contains nested subcategories)
        <ol>
            <li>Version A</li>
            <li>Version B</li>
        </ol>
    </li>
</ol>

In this example, Item three is the last item on the list. It is also the only item on the entire list that has another list nested inside it. The second ordered list (OL) nested inside "Item three" represented by the LI tag ("list item") contains the proverbial versions A and B of the item.

Following this logic, you can create all kinds of nesting situations when organizing lists of information. You can nest a list directly inside another list, without having to next the OL tag inside a LI ("list item") tag.

Nesting HTML Tables

As you learned from the examples above, In HTML, nesting is the process of placing HTML tags inside other tags to achieve a specific effect or page layout. In this section we are going to take a look at nesting HTML tables. A table is usually nested into the TD element of the parent table. Let's take a look at this very basic table nesting example.

<table>
<tr>
    <td><p>The table cell to the right has another table nested in it</p></td>
    <td>

        <table>
        <tr>
                <td><p>Cell 1</p></td>
                <td><p>Cell 2</p></td>
        </tr>
        </table>

    </td>
</tr>
</table></code>