Nesting HTML Elements

Learn How Elements Are Nested to Create a Structured HTML Document

Understanding Nested Elements

HTML elements are frequently placed inside other elements, creating a nested structure that organizes the content and establishes relationships between elements within a document.

Correct nesting is an important part of writing well-structured HTML. Understanding how elements relate to one another also makes markup easier to read, helps prevent structural errors, and provides a foundation for working with CSS and JavaScript.

How HTML Nesting Works

Nesting occurs when one HTML element is placed inside another element. The containing element surrounds the nested element and establishes a structural relationship between them.

For example:

<section>
  <h2>About Us</h2>
  <p>Learn more about our company.</p>
</section>

The h2 and p elements are nested inside the section element. Because both elements are directly contained by section, they share a relationship within the document hierarchy.

HTML documents can contain many levels of nesting, allowing simple elements to form increasingly complex document structures.

Parent & Child Elements

When one element directly contains another element, the containing element is called the parent and the directly contained element is called a child.

<section>
  <p>This is a paragraph.</p>
</section>

In this example, the relationship is:

section                  ← parent
└── p                    ← child

The section element is the parent of the p element because the paragraph is directly nested inside it. The p element is therefore a child of section.

A parent can have more than one child:

<section>
  <h2>About Us</h2>
  <p>Learn more about our company.</p>
  <p>We have been serving customers since 1995.</p>
</section>

Here, the h2 and both p elements are children of the same section element.

Sibling Elements

Elements that share the same parent are called siblings. Sibling elements appear at the same level of the document hierarchy.

<section>
  <h2>Products</h2>
  <p>View our latest products.</p>
  <p>New products are added regularly.</p>
</section>

The hierarchy can be represented as:

section
├── h2                    ← sibling
├── p                     ← sibling
└── p                     ← sibling

All three elements are children of section, which makes them siblings of one another.

This is also why sibling elements should normally be indented to the same level when formatting HTML source code.

Ancestor & Descendant Elements

HTML relationships can extend beyond an immediate parent and child. An element that contains another element at any deeper level is an ancestor, while an element contained somewhere within another element is a descendant.

<main>
  <section>
    <p>Learn <strong>HTML</strong> today.</p>
  </section>
</main>

This structure can be represented as:

main
└── section
    └── p
        └── strong

The main element is an ancestor of section, p, and strong. The strong element is a descendant of p, section, and main.

A parent is the element directly above another element, while an ancestor can be located one or more levels above it. Similarly, a child is directly contained by its parent, while a descendant can occur at any level within an ancestor.

HTML Document Hierarchy

A complete HTML document is itself a hierarchy of nested elements. The html element contains the head and body elements, while the body contains the elements used to structure the visible content of the webpage.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Webpage</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
    </header>
    <main>
      <section>
        <h2>About Us</h2>
        <p>Learn more about our company.</p>
      </section>
    </main>
  </body>
</html>

The same document can be represented as a hierarchy:

html
├── head
│   ├── meta
│   └── title
│
└── body
    ├── header
    │   └── h1
    │
    └── main
        └── section
            ├── h2
            └── p

This tree-like structure is one of the most important concepts to understand about HTML. Elements are not simply placed one after another; their nesting establishes relationships that form the structure of the document.

Correctly Nesting Elements

When elements are nested, an inner element should be completely contained within the appropriate outer element. Start and end tags should not overlap one another.

Correct:

<p>Learning <strong>HTML</strong> is important.</p>

The strong element begins and ends completely inside the p element.

Incorrect:

<p>Learning <strong>HTML</p></strong> is important.

In the incorrect example, the p element is closed while the strong element is still open. The tags overlap instead of forming a properly nested structure.

A useful way to remember the pattern is that nested elements normally close in the reverse order in which they were opened:

<outer>
  <inner>
  </inner>
</outer>

Element Content Rules

Correct nesting involves more than placing start and end tags in the proper order. HTML also defines rules about which types of content are permitted inside particular elements.

For example, a ul element represents a list and its list items are represented by li elements:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Likewise, a paragraph cannot contain every type of HTML element. For example, a section element should not be nested inside a p element:

<!-- Incorrect -->
<p>
  Paragraph text.
  <section>
    <h2>Section Heading</h2>
  </section>
</p>

HTML defines a content model for each element that describes the types of content the element is allowed to contain. As you learn individual HTML elements, these rules will help you determine where each element can be correctly used.

Indenting Nested Elements

Indentation does not normally determine the nesting of HTML elements; the markup itself establishes those relationships. Indentation visually represents the nesting so that people reading the source code can understand the hierarchy more easily.

Correct:

<main>
  <section>
    <h2>About Us</h2>
    <p>Learn more about our company.</p>
  </section>
</main>

Each level of nesting is indented one additional level. Elements that share the same parent are aligned because they are siblings.

Poorly formatted:

<main>
    <section>
 <h2>About Us</h2>
       <p>Learn more about our company.</p>
  </section>
</main>

The second example may represent the same basic element relationships, but the inconsistent indentation makes those relationships much harder for a person to recognize.

Indent According to Nesting, Not Position

Do not increase indentation simply because an element appears later in the source code. Indentation should represent the element's actual nesting level.

Correct:

<section>
  <h2>About Us</h2>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</section>

Incorrect formatting:

<section>
  <h2>About Us</h2>
    <p>First paragraph.</p>
      <p>Second paragraph.</p>
</section>

The h2 and both p elements are siblings because they have the same parent. Their indentation should therefore be aligned.

These tutorials use two spaces for each level of indentation. Other projects may use different conventions, but whichever style is chosen should be applied consistently throughout the project.

Common Nesting Mistakes

Nesting errors can make HTML difficult to understand and can cause the browser to construct a document structure different from the one the author intended.

Common nesting mistakes include:

  • Closing nested elements in the wrong order.
  • Placing an element inside another element that does not permit that type of content.
  • Forgetting a required end tag.
  • Indenting elements in a way that does not represent their actual nesting.
  • Indenting sibling elements at different levels.
  • Assuming that a webpage displaying correctly means the underlying nesting is correct.

Browsers include error-recovery rules for malformed HTML and may still display a page that contains nesting errors. For that reason, visually inspecting the webpage alone is not always enough to determine whether the document structure is correct.

Nesting Best Practices

Proper nesting and consistent formatting make the hierarchy of an HTML document easier for both you and other people to understand and maintain.

  • Keep nested elements completely inside their containing elements.
  • Close nested elements in the correct order.
  • Follow the content rules defined for each HTML element.
  • Indent each nesting level consistently.
  • Keep sibling elements aligned at the same indentation level.
  • Use indentation to represent structure rather than visual position on the webpage.
  • Keep deeply nested markup organized and readable.
  • Review the source structure instead of relying only on how the browser displays the page.

Good nesting makes the structure of the document visible directly in the source code. Someone unfamiliar with the webpage should be able to examine well-formatted markup and quickly understand how its major elements relate to one another.

Summary

Nesting HTML elements creates the hierarchy that forms the structure of a webpage. Directly contained elements have parent and child relationships, elements sharing a parent are siblings, and deeper levels of nesting create ancestor and descendant relationships.

Correct nesting requires both properly ordered markup and appropriate element content. Consistent indentation visually represents these relationships, making HTML easier to read, troubleshoot, edit, and maintain—especially when the source code is shared with other people.

See Also:
Elements
Tags
Attributes
HTML Div & Span

« Previous HTML Home Next »