What are Nested Elements?
Nested elements are HTML elements placed inside other HTML elements. The element containing another element is called the parent, while the element inside it is called the child.
Imagine a large box. Inside that box, you place a smaller box. Inside the smaller box, you can place something else.
HTML works in a similar way. One element can contain another element. This creates a clear structure for the webpage.
A Simple Example
Here a strong element is placed inside a paragraph.
<p>
I am learning
<strong>HTML</strong>.
</p>
The
<p>
element is the
parent.
The
<strong>
element is the
child.
Parent and Child Elements
Understanding parent and child relationships makes HTML much easier to understand.
Parent
<p>...</p>
An element that contains another element.
Child
<strong>...</strong>
An element placed directly inside another element.
Content
HTML
Text or other elements can appear inside a parent element.
See the Structure
You can visualize nested HTML like a tree.
<p> ← Parent
│
├── I am learning
│
├── <strong> ← Child
│ HTML
│ </strong>
│
└── .One Parent Can Have Multiple Children
A parent element can contain more than one child element.
<div>
<h1>My Website</h1>
<p>Welcome to my website.</p>
<button>Learn More</button>
</div>
Here the
<div>
is the parent.
It contains three child elements:
<h1>,
<p>,
and
<button>.
Multiple Levels of Nesting
Elements can be nested several levels deep.
<div>
<section>
<h2>About Me</h2>
<p>
I am learning HTML.
</p>
</section>
</div>div
│
└── section
│
├── h2
│
└── p
In this example,
<div>
is the parent of
<section>.
The
<section>
then becomes the parent of
<h2>
and
<p>.
Correct Nesting
When elements are nested, close them in the correct order.
<p>
This is
<strong>important</strong>
text.
</p><strong>
element opens after the paragraph
starts and closes before the paragraph
closes.
Incorrect Nesting
Do not overlap opening and closing tags.
<p>
This is
<strong>important
</p>
</strong>
This is incorrect because the
<strong>
element was opened inside the paragraph
but closed after the paragraph.
Nested Lists
Lists are another common example of nesting in HTML.
<ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>
The inner
<ul>
is nested inside the
<li>
element.
This creates a sub-list.
Nested Elements with Links
Elements can also be combined to create more useful structures.
<p>
Visit
<a href="https://example.com">
our website
</a>
to learn more.
</p>The link is nested inside the paragraph. The paragraph provides the surrounding content, while the anchor creates the clickable link.
How to Nest HTML Elements
Write the opening tag of the element that will contain other content.
Place another HTML element inside the parent.
Put text or additional elements inside the child.
Finish the inner element before closing its parent.
Finally close the outer element.
Common Nesting Mistakes
Keep these mistakes in mind while writing HTML.
- Closing the parent before closing the child.
- Overlapping HTML elements.
- Forgetting to close an element that requires a closing tag.
- Creating unnecessary levels of nesting that make the HTML difficult to read.
- Using invalid parent-child relationships.
- Poor indentation that makes the structure difficult to understand.
Use Indentation to See Nesting
Proper indentation makes nested HTML much easier to read.
Difficult to Read
<div><section><h2>About</h2><p>Hello</p></section></div>Easy to Read
<div>
<section>
<h2>About</h2>
<p>Hello</p>
</section>
</div>Try Nested Elements Yourself
Change the HTML and click Run to see the result.
Nested Elements: Quick Summary
An element placed inside another HTML element.
The element that contains another element.
The element placed inside a parent.
One parent can contain multiple child elements.
Close the most recently opened element first.
Use indentation to make the HTML hierarchy easy to understand.