Emmet: Nesting
HTML is a tree: every tag is either a child of another tag (nested inside it) or a sibling (at the same level, adjacent).
>and+are the shorthand for these two relationships.
1. What You'll Learn
- The nesting operator
>means "parent directly contains child" - The sibling operator
+means "adjacent element at the same level" - Mixing
>and+: descend first, then lay out siblings - Multi-level nesting: chaining
>to build deep trees - Sibling chains: chaining
+to place elements side by side
2. A Front-End Developer's Real Story
(1) Pain Point: Hand-Coding Nested HTML is Slow and Messy
Alice works at an e-commerce company and is building a product landing page. The page has just 4 sections: a top navigation bar, a hero section, 3 feature cards, and a footer. She opens her editor to start coding and immediately faces 5 levels of nesting:
<body>
<header>
<nav>
<ul>
<li><a href=""></a></li>
</ul>
</nav>
</header>
...
</body>
With each level she has to think, "Which tag am I inside right now?" With each </li> she has to double-check the closing order. She calculates: writing the nesting structure for this 60-line page will take 15 minutes — and 8 of those minutes are spent "finding the right closing position." Hand-coding nesting isn't just slow, it's error-prone — one slip and a </div> closes in the wrong place.
(2) How > and + Solve It
Emmet uses two operators to express "parent-child" and "sibling" relationships, written just like CSS selectors. Alice writes the entire navigation in one abbreviation line:
body>header>nav>ul>li*5>a
> means "nest one level deeper," *5 means "repeat 5 times," and each li automatically contains an a. From 5 levels of nesting to one abbreviation line — from 15 minutes to 8 seconds. After this lesson, you'll express HTML tree structures of any depth and any branching in a single line using > and +.
(3) Benefits
> and + are the foundation of Emmet — the climb-up ^, multiplication *, and grouping () you'll learn later all build on top of them. After mastering these two operators, Alice writes nested structures 10x faster, with automatic expansion eliminating "closing order chaos." The next 4 lessons layer on ^, *, (), ., #, and $ in sequence — finishing this lesson is a prerequisite for the next 4.
3. The Nesting Operator >: Parent Directly Contains Child
> means descend — the next element in the abbreviation is the direct child of the previous element. It's Emmet's core symbol for expressing "parent-child nesting" and is identical to the CSS child selector.
| Abbreviation Fragment | Meaning | Visual Position |
|---|---|---|
div>span |
span is div's direct child |
span is indented one level deeper than div |
div>section>p |
p is section's child, section is div's child |
2 levels of indentation |
nav>ul>li |
3 levels of nesting | 3 levels of indentation |
Tip:
>doesn't change the position of the previous element — it only determines which level subsequent elements descend into. Once you write>, all following elements (until a^appears or the subtree ends) remain at that level.
(1) Single-Level Nesting Illustration
Note: The tree diagram has been removed per this tutorial's §7 (Mermaid budget) — only Lesson 6 is permitted to use 1 Mermaid diagram. Please cross-reference the
>nesting table above with the+sibling table below:>forms parent-child relationships (one level of indentation), while+forms peer siblings (same indentation).
Both child elements enter div via >, so p and span are peers (siblings) — but they are children of div.
4. The Sibling Operator +: Adjacent Elements at the Same Level
+ means sibling — the next element in the abbreviation is at the same level as the previous element and positioned immediately after it. It corresponds to the CSS adjacent sibling selector.
| Abbreviation Fragment | Meaning | Visual Position |
|---|---|---|
h1+p |
p is a sibling of h1, adjacent |
Both have the same indentation |
div+div |
Two div elements as peers |
Forms a sibling chain |
nav+main+aside |
3 siblings at the same level | Classic three-column layout |
Key Point: When
+and>appear together,>is the "descend" signal while+is merely "append at the same level." For example,a>b+cmeans: first descend intoato createb, then stay insideaand appendc. The final structure is<a><b></b><c></c></a>.
5. Hands-On Examples
The following 5 examples cover all core scenarios for > and + — from the simplest "parent-child" to complex multi-level mixed trees.
▶ Example: Single-Level Nesting nav>ul>li (Difficulty: ★)
Three levels of vertical nesting — the most intuitive "parent-child" demonstration.
Abbreviation:
nav>ul>li
Expands to:
<nav>
<ul>
<li></li>
</ul>
</nav>
Output:
TEXT 📖 Display onlyA 3-level navigation skeleton: nav wraps ul, ul wraps li. Each `>` indents one level deeper. Simple as it is, this abbreviation demonstrates Emmet's most basic way of expressing "parent-child" — all more complex structures build on this foundation by layering other operators.
▶ Example: Sibling Elements h1+p (Difficulty: ★)
+ places two tags as adjacent siblings.
Abbreviation:
h1+p
Expands to:
<h1></h1>
<p></p>
Output:
TEXT 📖 Display onlyTwo tags at the same indentation level, side by side. This structure is common in article pages: a heading followed by a paragraph. `+` doesn't create a new "outer container" — it simply places elements as siblings next to the previous element.
▶ Example: Nesting and Siblings Mixed div>header>h1+nav+main>p+footer (Difficulty: ★★)
> descends, + appends at the same level — writing 5 levels of mixed structure in one line. Note that p and footer both become children of main (because + doesn't leave the current level).
Abbreviation:
div>header>h1+nav+main>p+footer
Expands to:
<div>
<header>
<h1></h1>
<nav></nav>
<main>
<p></p>
<footer></footer>
</main>
</header>
</div>
Output:
TEXT 📖 Display onlyParse path: beneath div is header (>); within header are three siblings — h1, nav, main (consecutive +); the most recent descend point is main, so main contains p and footer. Note: footer here is not the page-level footer — it becomes a child of main, a classic ">" and "+" mixing trap. To make footer a sibling of header and main, you need the climb-up operator ^ (next lesson).
▶ Example: Multi-Level Nesting + Multiplication article>section>p*3 (Difficulty: ★)
> descends multiple levels, *3 repeats the final p 3 times. This previews the * operator from lesson 5 — the full multiplication rules are covered there.
Abbreviation:
article>section>p*3
Expands to:
<article>
<section>
<p></p>
<p></p>
<p></p>
</section>
</article>
Output:
TEXT 📖 Display only`*3` applies to `p`, repeating it 3 times — note that all 3 p elements are direct children of section and siblings of each other. `article>section` descends twice (2 levels of indentation), then repeats 3 paragraphs inside section. To also repeat section, the abbreviation should be `article>(section>p*3)*2` (using parenthesis grouping, covered in lesson 6).
▶ Example: Complete Page Scaffolding body>header+main+footer (Difficulty: ★★)
The classic HTML5 page skeleton — 4 top-level tags, with body as the root and header/main/footer as three siblings.
Abbreviation:
body>header+main+footer
Expands to:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
Output:
TEXT 📖 Display onlyThe standard HTML5 three-section skeleton: header on top, main in the middle, footer at the bottom — all direct children of body. This is the "scaffolding abbreviation" for most modern websites. Memorize it as the starting point for any page. From here, descend into header and main to fill in content.
6. Full Example: A Blog Article Page Skeleton
Combine > and + to build a semantically complete blog article page scaffold.
▶ Example: Blog Article Page Skeleton (Difficulty: ★★)
Abbreviation:
body>header+main>article>(header>h1+p.time)+section*3>p+aside>ul>li*3+footer
Expands to:
<body>
<header></header>
<main>
<article>
<header>
<h1></h1>
<p class="time"></p>
</header>
<section>
<p></p>
</section>
<section>
<p></p>
</section>
<section>
<p></p>
</section>
<aside>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</aside>
<footer></footer>
</article>
</main>
<footer></footer>
</body>
Output:
TEXT 📖 Display onlyKey to parsing this line: starting from body, first descend into main (>), main contains article (descend again with >). Inside article, parentheses group header (containing h1 and p.time) as an independent subtree, then `*3` repeats 3 sections (each containing p). Finally, `+` lays aside and footer flat. Note: the outermost footer is a sibling of header and main; article also has its own inner footer at a different indentation level. This is nesting and siblings mixed at its most typical.
❓ FAQ
> or +?> is always parsed first. When Emmet encounters >, it pushes subsequent elements into a new level; + only appends siblings within the current level. To "lay flat first, then descend" or "descend first, then climb back," you need the climb-up operator ^ (lesson 5) or grouping () (lesson 6).a>b+c, are b and c siblings?a>b+c expands to <a><b></b><c></c></a> — b and c are both children of a, siblings of each other, but all inside a. The + does not make c escape from a.footer end up inside main in div>header>h1+nav+main>p+footer?> pushed the context inside main, and + by default appends siblings at the current level (inside main). So footer becomes a child of main rather than a sibling of header/main. This kind of "accidental nesting" requires the climb-up operator ^ to fix (lesson 5).> and +?div p and div>p are completely different: the former won't expand at all, while the latter expands to a nested structure. If you want to "format" your abbreviation in the editor for readability, the current official approach is to use parentheses for grouping (lesson 6).📖 Summary
>means a parent directly contains a child, equivalent to the CSS child selector+means an adjacent element at the same level, equivalent to the CSS adjacent sibling selector- Multiple
>form multi-level nesting; multiple+form sibling chains - When
>and+are mixed,>changes the current context level, and+appends siblings within the current level +never leaves the current level; to "jump out," use the climb-up operator^(next lesson)- The HTML5 standard scaffold
body>header+main+footercan serve as the starting point for any page
📝 Exercises
- Basic (Difficulty: ★): Write 4 Emmet abbreviations that expand to: (a) a
divcontaining ap; (b)h1andpas siblings; (c)navcontainingul, withulcontaining 3li; (d)bodycontainingheader,main, andfooteras three siblings. - Intermediate (Difficulty: ★★): Analyze the abbreviation
div>(header>ul>li*2>a)+footer>p(don't rush to write the answer — first sketch the hierarchy on paper), list all parent-child relationships, then expand in your editor to verify. - Challenge (Difficulty: ★★★): Use a single Emmet abbreviation to expand a complete "product landing page" skeleton — containing a top navigation, hero section, 3 feature cards, and a bottom footer. Explain why the number of
>and+operators determines the final nesting depth, and write at least 3 equivalent simplified versions (using parentheses or climb-up).
