Emmet Cheatsheet
NewSearchable, filterable reference for Emmet HTML and CSS abbreviation syntax, with expandable examples showing the generated markup or CSS for each abbreviation.
Frequently Asked Questions
What is Emmet and where is it available?
Emmet is an abbreviation-expansion toolkit built into most modern editors (VS Code, WebStorm, Sublime Text, and more) that turns short CSS-selector-like strings into full HTML or CSS, dramatically speeding up markup authoring.
What does the > operator do versus the + operator?
`>` nests an element inside the previous one as its child (like `div>ul>li`), while `+` places an element next to the previous one as a sibling at the same level (like `header+main+footer`) — the two are frequently combined in a single abbreviation.
How does the $ numbering placeholder work?
`$` is replaced with the current repetition index starting at 1 when combined with the `*` multiplication operator (e.g. `li.item$*3` produces `item1`, `item2`, `item3`); repeating it like `$$$` zero-pads the number, and `$@-` reverses the counting order.
Do the CSS abbreviations work the same way as the HTML ones?
They follow a different, more compact mapping tuned for CSS/SCSS files — short codes like `m10`, `df`, or `pos:a` expand to full property/value declarations (`margin: 10px;`, `display: flex;`, `position: absolute;`) rather than to markup.
Can I copy an abbreviation or its expansion directly from this tool?
Yes — each card has "Copy abbreviation" and "Copy expanded" buttons, and the toggle at the top switches every card between showing the raw abbreviation syntax and its fully expanded output.