HTML Nesting Explained: How to Nest HTML Elements

What Is HTML Nesting?

Nesting is the practice of putting one HTML element inside another. The outer element contains the inner element. This is how a simple document grows into a hierarchy of content — sections inside a body, headings inside a section, emphasis inside a paragraph.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Nested Page</title>
</head>
<body>
    <article>
        <h1>Welcome</h1>
        <p>
            This paragraph contains a <strong>bold word</strong>
            nested inside it.
        </p>
    </article>
</body>
</html>

Look closely and you can see several levels of nesting:

• The <body> contains an <article>
• The <article> contains an <h1> and a <p>
• The <p> contains a <strong>

Every element is inside another element, except for the outermost one. That is nesting.

The Golden Rule of Nesting

Every HTML element has two tags: an opening tag and a closing tag (except for void elements). When you nest elements, the closing tags must appear in the exact reverse order of the opening tags.

This is called the LIFO rule — last in, first out. The most recently opened element must be closed first.

In the incorrect version, the <p> closes before the <strong>. The two elements overlap instead of nesting cleanly.

Visualizing the rule

Read from left to right, the sequence is: open, open, close, close. The inner element opens second and closes first.

Parent, Child, and Sibling

HTML nesting uses family tree terminology. Understanding these three words makes it much easier to describe relationships in any HTML document.

Parent

The element that directly contains another element.

Child

An element that is directly contained by another element.

Sibling

Two elements that share the same parent.

Ancestor

Any element that contains a given element, at any depth.

Descendant

Any element contained by a given element, at any depth.

Here is the same vocabulary applied to a small HTML snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Family Tree</title>
</head>
<body>
    <main>
        <h1>Page Title</h1>
        <p>
            A paragraph with a <strong>bold</strong> word.
        </p>
    </main>
</body>
</html>

In that example:

• <main> is the parent of <h1> and <p>.
• <h1> is a child of <main>.
• <h1> and <p> are siblings — they share the same parent.
• <strong> is a descendant of <main>, and <main> is an ancestor of <strong>.

Nesting and the DOM Tree

The browser reads your HTML and builds a tree structure called the DOM (Document Object Model). Each element becomes a node, and nested elements become children of their parent.

Take this small snippet:

<main>
    <h1>Title</h1>
    <p>
        A <strong>bold</strong> word.
    </p>
</main>

The browser builds a tree that looks like this:

The <main> element is at the top. Its children are <h1> and <p>. The <p> has one child: <strong>.

Why the DOM matters

The DOM is what CSS styles and what JavaScript interacts with. When you select document.querySelector("p strong"), you are telling JavaScript to traverse this tree and find a <strong> inside a <p>.

If your nesting is wrong, the tree is wrong — and everything that depends on the tree (styling, scripts, screen readers, search engines) will behave unpredictably.

Correct Nesting in Practice

Real HTML is a stack of nested elements. Here are common patterns you will see again and again.

Sections inside main

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nested Sections</title>
</head>
<body>
    <main>
        <section>
            <h2>Introduction</h2>
            <p>The intro paragraph.</p>
        </section>
        <section>
            <h2>Details</h2>
            <p>More information here.</p>
        </section>
    </main>
</body>
</html>

Lists inside list items

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nested Lists</title>
</head>
<body>
    <ul>
        <li>
            Front-end
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </li>
        <li>
            Back-end
            <ul>
                <li>Node.js</li>
                <li>Python</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Notice how each nested list is inside its parent list item, and every element closes in the correct order.

Anchors inside paragraphs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nested Anchors</title>
</head>
<body>
    <p>
        Visit <a href="https://inarlearn.com">Inar Learn</a>
        to explore the HTML guide.
    </p>
</body>
</html>

Tables with nested structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nested Table Structure</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Role</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Inar Learn</td>
                <td>Web Development Education</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Tables are one of the deepest nesting patterns in everyday HTML — <table> contains <thead>, which contains <tr>, which contains <th>. Every level is properly closed before its parent.

Block Elements vs. Inline Elements

Not every element can contain every other element. There is a general rule based on whether an element is “block-level” or “inline.”

Block inside inline: not allowed

In general, a block element cannot be placed inside an inline element. The following is invalid:

Some browsers will still render the first example, but it is invalid HTML. The <div> will be moved outside the <span> when the browser builds the DOM.

Inline inside block: perfectly fine

Putting an inline element inside a block element is standard, valid nesting — and it is what happens constantly in real HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Inside Block</title>
</head>
<body>
    <p>
        This is a paragraph with
        <strong>bold text</strong>,
        <em>italic text</em>, and a
        <a href="https://inarlearn.com">link</a>
        all nested inside.
    </p>
</body>
</html>

Content Models: What Each Element Can Contain

HTML has formal rules about what each element may contain. These are called content models. They are more precise than the block/inline distinction.

The rules matter when you nest. For example, a <p> element can contain phrasing content but not sectioning content. That is why you cannot put a <div> or a <section> inside a paragraph.

Example: what a paragraph can contain

The invalid example will be fixed by the browser: the <p> will close before the <div>, and the paragraph will contain only the text before it.

Common Invalid Nesting Patterns

A handful of invalid nesting patterns appear in beginner code constantly. Here are the ones to watch for.

1. Anchor inside anchor

2. Block element inside a paragraph

3. List item outside a list

4. Table row outside a table

5. Button inside a link

6. Overlapping tags

Indentation and Readability

Indentation has no effect on how the browser parses or renders HTML. But it makes nesting relationships visible to human readers, and it is a universal convention in professional code.

Both snippets produce exactly the same DOM. But the second version makes the nesting hierarchy obvious at a glance. A reader can immediately see that <header> and <section> are children of <article>.

Indentation convention

Two spaces or four spaces per level is the standard. Choose one and be consistent. Do not mix tabs and spaces — different editors will render them differently.

How Deep Should Nesting Go?

There is no hard limit on nesting depth. But deeply nested HTML is harder to read, harder to style, and slower for the browser to process.

A reasonable guideline is to keep any content block within four or five levels of nesting. If you find yourself going deeper, it usually means the structure could be simplified.

The five levels of <div> in the first example probably do nothing. Removing them simplifies the markup without changing the page.

Common Nesting Mistakes

Most HTML nesting bugs come from a small set of repeated mistakes. Here are the ones to watch for.

1. Overlapping tags

2. Closing the wrong tag

3. Forgetting to close a parent

4. Nesting interactive elements

5. Nesting a list directly inside another list

6. Placing block content inside an inline element

Best Practices for HTML Nesting

A few habits make your nested HTML cleaner and easier to maintain.

Key Takeaways

• HTML nesting means placing one element inside another — it is how every page gets its structure.
• The golden rule: every child element must be fully closed before its parent is closed.
• Nested elements form a tree — the DOM — that CSS and JavaScript both operate on.
• Parent, child, and sibling describe the relationships between nested elements.
• Not every element can contain every other element — content models define what is allowed.
• Block elements cannot go inside inline elements (with some HTML5 exceptions).
• Invalid nesting patterns include overlapping tags, anchors inside anchors, and lists without a wrapper.
• Browsers silently fix bad nesting, so the DOM may not match what you wrote. Use a validator.
• Indentation does not affect rendering, but it makes nesting hierarchies readable.
• Keep nesting shallow — four or five levels is usually enough for any content block.

What to Learn Next

Now that you understand HTML nesting, the next step is to apply it with confidence. Start with HTML Elements vs Tags and HTML Syntax Explained for the foundational concepts.

For deeper coverage, explore HTML Elements, HTML Attributes, and HTML Comments. To understand the tree your HTML becomes, see How Web Browsers Work and How Websites Work.

Practice Challenge

Build a small HTML page that demonstrates nested structure at several depths. Your page should include:

• A <main> element that contains two <section> elements
• Inside each section, a heading and at least one paragraph
• Inside at least one paragraph, an inline element like <strong> or <a>
• A nested list — a list item that contains another list
• A table with a proper <thead> and <tbody> structure
• Proper indentation throughout — every nesting level indented further than its parent

Once your page is complete, open it in a browser and use DevTools to inspect the DOM tree. Confirm that the tree matches the hierarchy you wrote in the source. Then run the page through the W3C validator — a clean result means your nesting is correct.

If you can build a page with correct nesting at multiple levels, you have mastered one of the most important skills in HTML.