Emmet Cheat Sheet
Emmet reference with HTML abbreviations, CSS shortcuts, nesting, multiplication, and code snippets. Speed up your coding workflow.
Elements
| Cmdlet | Description | Example |
|---|---|---|
| Element name → tag | div → <div></div> | |
| Element with class | div.container → <div class="container"></div> | |
| Div with class (implicit div) | .wrapper → <div class="wrapper"></div> | |
| Element with ID | div#main → <div id="main"></div> | |
| Div with ID (implicit div) | #app → <div id="app"></div> | |
| Multiple classes | div.flex.gap-4 → <div class="flex gap-4"></div> | |
| ID and class combined | form#login.auth → <form id="login" class="auth"></form> | |
| Element with attribute | input[type=email] → <input type="email"> | |
| Multiple attributes | a[href=#][target=_blank] | |
| Element with text content | p{Hello World} → <p>Hello World</p> |
Nesting
| Cmdlet | Description | Example |
|---|---|---|
| Child element | ul>li → <ul><li></li></ul> | |
| Deep nesting | nav>ul>li>a → nested tags | |
| Sibling element | h1+p → <h1></h1><p></p> | |
| Multiple siblings | header+main+footer → three siblings | |
| Climb up one level | div>p>span^p → span inside first p, second p sibling | |
| Climb up two levels | ^^ → climb up 2 levels in tree | |
| Grouping with parentheses | (header>nav)+(main>section)+footer |
Multiplication
| Cmdlet | Description | Example |
|---|---|---|
| Multiply element | ul>li*5 → 5 list items in ul | |
| Numbered classes | → .item1, .item2, .item3 | |
| Zero-padded numbers | → .item01, .item02, .item03 | |
| Numbered text content | → Item 1, Item 2, Item 3 | |
| Start numbering at 3 | li.item$@3*3 → .item3, .item4, .item5 | |
| Reverse numbering | li.item$@-*3 → .item3, .item2, .item1 |
Snippets
| Cmdlet | Description | Example |
|---|---|---|
| HTML5 boilerplate | ! → full HTML document template | |
| CSS link tag | → <link rel="stylesheet" href="style.css"> | |
| Script with src | → <script src=""></script> | |
| Link / mailto anchor | a:mail → <a href="mailto:"></a> | |
| Input type shortcuts | input:email → <input type="email"> | |
| Button element | btn → <button></button> | |
| Image with src and alt | img → <img src="" alt=""> | |
| Form with method | form:post → <form action="" method="post"></form> | |
| Table with row and cell | table+ → table>tr>td | |
| Select with options | select+ → select>option | |
| List with items | ul+ → ul>li | |
| Viewport meta tag | → <meta name="viewport" content="..."> | |
| Description meta tag | → <meta name="description" content=""> |
CSS
| Cmdlet | Description | Example |
|---|---|---|
| margin: 10px | m10 → margin: 10px; | |
| padding: 10px 20px | p10-20 → padding: 10px 20px; | |
| width: 100% | w100p → width: 100%; | |
| height: 100vh | h100vh → height: 100vh; | |
| display: flex/grid/none | d:f → display: flex; | |
| font-size: 16px | fz16 → font-size: 16px; | |
| font-weight: 700 | fw700 → font-weight: 700; | |
| color: #333 | c#333 → color: #333; | |
| background-color: #f00 | bgc#f00 → background-color: #f00; | |
| position relative/absolute/fixed | pos:a → position: absolute; | |
| border shorthand | bd1-s-#ccc → border: 1px solid #ccc; | |
| text-align center/left/right | tac → text-align: center; |
Advanced
| Cmdlet | Description | Example |
|---|---|---|
| Wrap selected text with Emmet | Select text → Ctrl+Shift+A → ul>li* wraps each line | |
| Change wrapping tag | Place cursor on tag → update abbreviation | |
| Remove tag but keep content | Removes wrapping tag, preserves inner content | |
| Comment/uncomment with Emmet | Works in HTML, CSS, and JSX | |
| Lorem ipsum generator | lorem → paragraph; lorem10 → 10 words | |
| Multiple paragraphs with lorem | p*3>lorem → 3 paragraphs of lorem text |
Frequently asked questions
What is Emmet?
Emmet is a toolkit for web developers that dramatically speeds up HTML and CSS writing. You type short abbreviations and expand them into full code with Tab. It's built into VS Code, WebStorm, Sublime Text, and most modern editors. Originally known as Zen Coding.
How do I use Emmet in VS Code?
Emmet is built into VS Code - no extension needed. Type an abbreviation in an HTML/CSS file and press Tab to expand. For JSX in React, it works automatically in .jsx/.tsx files. Use Ctrl+Shift+P → 'Emmet: Wrap with Abbreviation' for wrapping selected text.
Does Emmet work with React/JSX?
Yes! In VS Code, Emmet works in .jsx and .tsx files by default. It automatically converts class to className and uses self-closing tags. If it doesn't work, add '"emmet.includeLanguages": {"javascript": "javascriptreact"}' to your VS Code settings.
What's the difference between > and +?
'>' creates a child element (nested inside), '+' creates a sibling (same level). 'div>p' gives <div><p></p></div>, while 'div+p' gives <div></div><p></p>. Use '>' for nesting and '+' for elements at the same level.
Can I create custom Emmet snippets?
Yes! In VS Code, add custom snippets to settings.json under 'emmet.extensionsPath' pointing to a snippets.json file. Define your own abbreviations for frequently used patterns. Many frameworks also have Emmet snippet extensions available.
How do I remember all the CSS abbreviations?
CSS abbreviations follow a pattern: first letter(s) of each word in the property name. m = margin, p = padding, d = display, bg = background, fz = font-size, fw = font-weight, bd = border. Values follow with no space: m10 = margin: 10px. The pattern is consistent enough to guess most abbreviations.
Go from reference to real skills
Cheat sheets are great for quick lookups. Our in-depth courses take you from the fundamentals to professional-level mastery.
Browse all courses