Emmet
Emmet is a workflow standard built into almost every modern code editor (VS Code, Sublime, WebStorm).
If you are currently typing full HTML tags manually, you are working twice as hard as you need to. Emmet dramatically increases coding speed and productivity by allowing you to write shorthand code that expands into full HTML/CSS structures.
1. HTML Syntax
These are the keystrokes you will use 99% of the time. Type the abbreviation and hit Tab (or Enter, depending on your settings) to expand it.
! → Generates a full HTML5 document structure.
div → <div></div>
link → <link rel="stylesheet" href=""> (Smart defaults)
input → <input type="text">
Classes & IDs
Emmet uses CSS-style selectors to generate HTML.
Classes (.): div.container → <div class="container"></div>
IDs (#): form#login → <form id="login"></form>
Chaining: button.btn.btn-primary#submit → Creates a button with both classes and the ID.
👉 Pro Tip (Implicit Tags): You often don't even need to type the tag name.
.card → <div class="card"></div> (Default is div)
em>.text → <em><span class="text"></span></em> (Emmet is smart enough to know span is the standard child of em)
ul>.item → <ul><li class="item"></li></ul> (Emmet knows li belongs inside ul)
2. Structure & Hierarchy
Building complex layouts one tag at a time is slow. Use these operators to map out the tree structure in a single line.
| Operator | Function | Example | Result |
> | Child | ul>li | <ul><li></li></ul> |
+ | Sibling | h1+p | <h1></h1><p></p> |
* | Multiply | li*3 | 3 list items: <li></li>... |
^ | Climb Up | div>p^span | Puts the span next to div, not inside it. |
() | Grouping | header>(nav>ul)+div | Groups the nav/ul together so the div stays a sibling of nav. |
3. Content, Attributes & Numbering
Don't just build empty tags; fill them with data as you go.
Adding Text & Attributes
Content {}: h1{Hello World} → <h1>Hello World</h1>
Attributes []: a[href=index.html target=_blank] → <a href="index.html" target="_blank"></a>
Combined: a.btn{Click Me} → <a href="" class="btn">Click Me</a>
The Power of Numbering ($)
When multiplying elements, use $ to number them automatically.
Basic Numbering: li.item$*3 → li.item1, li.item2, li.item3
Padding: li.item$$*3 → 01, 02, 03
Descending: li.item$@-*3 → 3, 2, 1
Offset: li.item$@3*3 → Starts counting from 3 (3, 4, 5).
Lorem Ipsum Generator
Need dummy text? Don't copy-paste from a website.
lorem → Generates a 30-word paragraph.
lorem10 → Generates exactly 10 words.
ul>li*3>lorem5 → Creates a list where each item has 5 random words.
4. CSS Superpowers
Emmet is just as powerful in CSS files. It uses "fuzzy search," so you don't need to remember exact abbreviations—just the first letters.
w10 → width: 10px; (Defaults to pixels)
w10% → width: 10%;
m10-20 → margin: 10px 20px;
p0 → padding: 0;
pos → position: relative;
bd+ → border: 1px solid #000; (The + usually adds common values like 1px solid).
df → display: flex;
aic → align-items: center;
jcc → justify-content: center;
5. Advanced & Modern Workflows (Pro Tips)
These features are crucial for modern frameworks like React and everyday efficiency.
Wrap with Abbreviation
If you have existing code (or text) that you need to wrap in a tag, don't cut and paste.
Select the text/code.
Open Command Palette (Ctrl+Shift+P).
Type "Wrap with Abbreviation".
Enter your Emmet string (e.g., .wrapper>ul>li*).
Result: Your text is instantly wrapped inside the structure.
React & JSX Support
Standard Emmet expands . to class="", which throws errors in React. You can configure VS Code to use className automatically.
Setup: In VS Code settings.json, add:
JSON
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
Result: Typing .box inside a .js file now expands to <div className="box"></div>.
6. Authoring Custom Snippets: Syntax & Rules
To take full control of Emmet, you need to understand the syntax rules for your snippets.json file. Emmet 2.0 introduced strict formatting guidelines that differ from older versions.
The Basic Structure
Your snippets.json file is divided by language. Within each language, you use a single property called "snippets".
JSON
{
"html": {
"snippets": {
"ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml }",
"oll": "<ol><li id=${1}> Will only work in html files </ol>",
"text": "{ Wrap plain text in curly braces }"
}
},
"css": {
"snippets": {
"cb": "color: black",
"bsd": "border: 1px solid ${1:red}",
"ls": "list-style: ${1}"
}
}
}
The 4 Golden Rules of Custom Snippets
If your snippets aren't working, you are likely breaking one of these four rules regarding syntax and punctuation.
1. Cursor & Tab Stops (TextMate Syntax)
Old versions of Emmet used | or ${cursor} to mark where your mouse lands. These are deprecated.
2. CSS Punctuation: No Semicolons
When defining CSS snippets, never include the trailing semicolon ;.
Why? Emmet is smart. It detects your file type. If you are in .css, it adds the semicolon. If you are in .sass or .stylus, it omits it.
Correct: "cb": "color: black"
Incorrect: "cb": "color: black;" (This will result in double semicolons).
3. CSS Naming: No Colons
Do not use colons (:) in your shortcut names (keys).
Why? Emmet uses the colon to separate properties from values during fuzzy matching.
Correct: "dn": "display: none"
Incorrect: "d:n": "display: none"
4. HTML: Abbreviation vs. Raw Tag
You can define snippets using Emmet abbreviations or raw HTML.
Abbreviation (ul>li): "Smart." It adapts to the file you are in. It generates <ul><li></li></ul> in HTML files, but ul > li in Pug files.
Raw HTML (<ul>...): "Rigid." It will only render correctly in strict HTML files. It will break or look wrong in Pug/Haml/Slim.
Comparison: Old vs. New Emmet
| Feature | Old Emmet | Emmet 2.0 (Current) |
| Definition | snippets & abbreviations | snippets (Everything is combined here) |
| Cursor | ` | or${cursor}` |
| CSS Names | Allowed colons (d:n) | No colons (Reserved for parsing) |
| CSS Values | Allowed semicolons | No semicolons (Auto-detected by file type) |
Emmet is not just about typing fewer characters; it is about staying in the "flow state." Every time you stop to manually type <div class="...">, you break your mental focus on the component you are building. By offloading the repetitive syntax to Emmet, you free your brain to focus purely on the structure and logic of your application.
You do not need to memorize every shortcut in this guide today. Start small:
Commit to using . for classes and > for nesting.
Use ! for every new HTML file.
Try the "Wrap with Abbreviation" command the next time you need to refactor a block of code.
Once these basics become muscle memory, you will find yourself coding at the speed of thought.
"Give me six hours to chop down a tree and I will spend the first four sharpening the axe."
— Abraham Lincoln
To uncover more secrets about the invisible infrastructure powering your daily life, be sure to read my full series on The Internet.
Check out the full series: The Internet by Satpalsinh Rana
Resources
