Nesting Elements
Place elements inside other elements to build structure.
Syntax
<p>Text with <strong>bold</strong> inside.</p>HTML elements can be nested, meaning one element is placed inside another. This is how you build complex pages from simple parts.
Rules of nesting
- Elements must be closed in the reverse order they were opened.
- Proper nesting keeps your page valid and predictable.
For example, a <strong> element inside a <p> element must be closed before the paragraph.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer nests <li> elements inside <ul> to create a navigation menu with proper list semantics.
- A designer nests an <img> inside an <a> to make an image clickable as a link.
- A content author nests <strong> inside <p> to bold a keyword within a paragraph of text.
More examples
Correctly nested list items
<li> elements are properly nested inside <ul>; each list item closes before the next opens.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Image nested inside a link
Placing <img> inside <a> makes the image act as a clickable link without extra JavaScript.
<a href="/home">
<img src="logo.svg" alt="Home">
</a>Incorrectly vs correctly nested tags
Tags must not overlap; the inner element must be closed before its parent closes.
<!-- Wrong: tags cross -->
<!-- <p>Text <strong>bold</p></strong> -->
<!-- Correct: inner tag closes first -->
<p>Text <strong>bold</strong> continues.</p>
Discussion