Why Typing Full HTML Tags Is a Waste of Your Time
Every front-end developer has typed <div class="container"></div> a thousand times. Emmet turns that repetitive markup into short, CSS-selector-like abbreviations that expand into full HTML trees as you type. It ships built into VS Code — there is nothing to install, no extension to enable. If you have VS Code open right now, you already have it.
Emmet works in any file VS Code recognizes as HTML, XML, Handlebars, JSX/TSX, Vue templates, Pug, and most CSS-family languages. The abbreviation syntax is the same everywhere, which is part of why it is worth learning once and using constantly.
The Basic Abbreviation Syntax
Emmet abbreviations borrow the operators you already know from CSS selectors:
>creates a child element+creates a sibling element^climbs up one level (goes back to the parent's parent)*repeats an element a given number of times.classnameadds a class#idadds an id{text}inserts literal text content[attr="value"]adds a custom attribute
To trigger the expansion, type the abbreviation on its own and press Tab (or Enter, depending on your settings). In a fresh .html file, type:
!Press Tab and Emmet expands it into a full HTML5 boilerplate document — <!DOCTYPE html>, <html lang="en">, the <head> with a viewport meta tag, and an empty <body> — with your cursor already placed inside the <body> tag ready to type.
Building Nested Structures
This is where Emmet actually saves time. Instead of hand-nesting tags, describe the structure with >:
nav>ul>li*4>a{Link $}Expands to a <nav> containing a <ul> with four <li> items, each holding an <a> tag. The $ is a special placeholder that auto-increments, so you get "Link 1", "Link 2", "Link 3", and "Link 4" without typing them individually:
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</nav>To build siblings instead of children, use +. To pop back up a level and continue building next to a parent rather than inside it, use ^:
div>header+main^footerThis creates a <div> with a <header> and a <main> as siblings inside it, then climbs back out so <footer> becomes a sibling of the <div> itself rather than another child.
Classes, IDs, and Semantic Tags
Emmet infers the tag name from the class or ID when you leave it out — a huge shortcut for the semantic layouts modern CSS frameworks expect:
.card>.card-header+.card-body>p{Card content}Because no tag name is given before the dot, Emmet defaults to <div> for each. If you type section.hero, you get <section class="hero"></section> instead — Emmet knows about common HTML5 semantic tags and will use the correct one when it recognizes the abbreviation.
Multiplication With Numbered Attributes
Combine * with $ to generate grids, tables, or lists of any size instantly:
table>tr*3>td*4{Row $ Col $}This builds a 3-row, 4-column table where every cell gets unique incrementing text. Wrap $ in extra dollar signs to zero-pad it — $$ produces 001, 002, and so on, which is handy for generating test fixtures or placeholder IDs.
Lorem Ipsum on Demand
Need filler text to check how a layout reflows with real content length? Type:
p*3>lorem10This generates three paragraphs, each containing 10 words of Latin placeholder text. Adjust the number to control the word count per paragraph.
Checking and Customizing Your Trigger Key
By default, VS Code expands Emmet abbreviations on Tab only when the cursor is at the end of a token that looks like a valid abbreviation, and only in files where emmet.includeLanguages or the built-in language list applies. If Tab is inserting a literal tab character instead of expanding your abbreviation, open Settings (Ctrl+,), search for emmet.triggerExpansionOnTab, and make sure it is checked.
Using Emmet Inside JSX and CSS
In .jsx or .tsx files, Emmet abbreviations work the same way but output className instead of class automatically, matching React's attribute naming. In CSS files, a different but equally compact abbreviation set applies — for example, typing m10-a and pressing Tab expands to margin: 10px auto;, and df expands to display: flex;. The same muscle memory of "type shorthand, hit Tab" carries over between markup and styles.
Once these abbreviations become second nature, you will find yourself writing boilerplate structure faster than you can describe it in words — which, in the end, is the entire point of Emmet.
Discussion & Insights