glunty

Emmet Cheat Sheet

A searchable reference of Emmet HTML and CSS abbreviations and what each one expands to.

Abbreviation Expands to
div>ul>li The child operator > nests each element inside the previous one: div contains ul which contains li.
div+p+bq The sibling operator + places elements at the same level: a div, a paragraph, and a blockquote in a row.
div>p>span^bq The climb-up operator ^ moves one level up, so blockquote becomes a sibling of p inside the div.
p>(span+em)+b Parentheses group span and em inside p; the trailing +b adds a sibling at the same group level.
li*5 The multiplication operator * repeats the element, producing five li elements.
.item$*3 The numbering token $ is replaced by the item number, giving classes item1, item2, and item3.
(li>a)*3 Grouping combined with multiplication repeats the whole li>a block three times.
ul>li*3>a Repeats li three times, and each repeated li holds its own anchor element.
#header The hash sets an id attribute; with no tag it defaults to a div, giving <div id="header"></div>.
.box A leading dot sets a class: <div class="box"></div>.
.btn.btn-primary Chained dots add several classes: <div class="btn btn-primary"></div>.
a[href=#] Square brackets add custom attributes: <a href="#"></a>.
p{Read more} Text placed in braces goes inside the element: <p>Read more</p>.
.content With only a class and no tag name, Emmet assumes a div: <div class="content"></div>.
input[type=checkbox] Bracketed attributes work on any tag: <input type="checkbox">.
a.link[target=_blank] Tag, class, and attribute combine: <a class="link" target="_blank"></a>.
! Expands to a full HTML5 document skeleton: doctype, html, head with meta charset and viewport, title, and body.
link:css Inserts a stylesheet link: <link rel="stylesheet" href="style.css">.
script:src Creates a script tag with an empty src ready for a URL: <script src=""></script>.
img Creates an image tag with empty src and alt attributes: <img src="" alt="">.
a:link Creates an anchor pre-filled with an http:// href: <a href="http://"></a>.
form:post Creates a form using the POST method: <form action="" method="post"></form>.
input:text Creates a text input with name and id attributes: <input type="text" name="" id="">.
ul>li Creates an unordered list holding a single list item: <ul><li></li></ul>.
table Creates an empty table element ready for rows and cells: <table></table>.
m Expands to the margin property awaiting a value: margin: ;.
p Expands to the padding property awaiting a value: padding: ;.
w100 A trailing number becomes a pixel value: width: 100px;.
h50 A trailing number becomes a pixel value: height: 50px;.
df Shorthand for a flex container: display: flex;.
posr Shorthand for relative positioning: position: relative;.
fz Expands to the font-size property awaiting a value: font-size: ;.
bgc Expands to a background color with a default hex value: background-color: #fff;.
bd Expands to the border shorthand awaiting a value: border: ;.
nav>ul>li*5 A nav wrapping a ul with five list items: a complete menu skeleton in one line.
.container>.row A container div wrapping a row div, both generated from bare class names.
ul>li.item$*3 A list of three items with numbered classes item1, item2, and item3.
ul.nav>li.nav-item*3>a.nav-link{Link} A full nav list: three nav-item entries, each holding a nav-link anchor labelled Link.
table>tr*2>td*3 A table with two rows, each containing three data cells.
header>nav>a*3 A header holding a nav with three anchor links inside.

Runs entirely in your browser. Nothing you type is sent anywhere; open DevTools and watch the Network tab to verify zero requests.

What this tool does

This is a searchable quick reference for Emmet, the abbreviation engine built into editors like VS Code that turns short expressions into full HTML and CSS. Each row pairs an abbreviation with what it expands to, grouped by nesting operators, attributes, common HTML snippets, CSS property shorthands, and complete examples. Type in the filter box to search across both columns, or tap a category button to focus on one group. The whole list is built into the page, so it works offline and sends nothing anywhere.

How to use it

Start typing in the Filter box. Entering class finds the class shorthands; entering flex jumps to df; entering skeleton surfaces the ! boilerplate. The category buttons (Nesting, Attributes, HTML, CSS, Examples) narrow the table to one family and combine with the text filter, so you can pick CSS and type position to zero in on posr. Clear the box to see the full sheet again.

Common use cases

  • Recalling how an operator behaves, like the difference between child div>p and sibling div+p.
  • Scaffolding a list or menu fast with ul>li*5 instead of typing every tag.
  • Looking up a CSS shorthand you half-remember, such as bgc for background-color.
  • Numbering repeated items with .item$*3 when generating rows or cards.
  • Teaching a teammate the basics of Emmet before they enable it in their editor.

Common pitfalls

  • Forgetting the trigger key. An abbreviation only expands when you press Tab or Enter. If it stays as plain text, your editor may not have Emmet enabled for that file type.
  • Adding a space. Emmet reads the abbreviation up to the first whitespace, so a stray space in the middle breaks the expansion. Keep the whole expression contiguous.
  • Confusing + and the child operator. The sibling + keeps elements at the same level, while the child operator nests them. Mixing them up is the most common reason the output tree looks wrong.
  • Expecting numbering without repetition. The $ token only counts up when the element is multiplied, as in .item$*3. On its own it produces a single unnumbered item.

Frequently asked questions

What is Emmet?
Emmet is a plugin built into most modern code editors, such as VS Code, that expands short abbreviations into full HTML or CSS. You type a compact expression like ul>li*3 and press Tab or Enter, and Emmet writes out the complete markup. It saves a lot of typing and helps you scaffold structure quickly.
What does the > operator do in Emmet?
The greater-than operator > means child, so it nests the element on its right inside the element on its left. Writing div>ul>li produces a div containing a ul that contains an li. You can chain it as deep as you need, and pair it with the sibling operator + to build entire trees in one line.
How do I add classes in Emmet?
Use a dot before the class name, so .box makes a div with class box. Chain several dots to add multiple classes, as in .btn.btn-primary. If you write only a class with no tag name, Emmet assumes a div, so you rarely need to type div at all.
How do I repeat elements in Emmet?
Use the multiplication operator * followed by a count, so li*5 creates five list items. Combine it with the numbering token, the dollar sign, to number each copy: li.item$*3 yields item1, item2, and item3. Wrap a group in parentheses to repeat a whole block, as in (li>a)*3.
Where does Emmet work?
Emmet ships built in with VS Code and is available as a plugin for Sublime Text, WebStorm and other JetBrains editors, Vim, and many more. It works inside HTML, CSS, and related syntaxes such as JSX, Sass, and Less. This cheat sheet is a reference, so you still expand the abbreviations in your own editor.
Does this cheat sheet send anything anywhere?
No. The entire abbreviation list is baked into the page and every search and filter runs locally in your browser with JavaScript, so nothing you type is sent to any server. Open your browser DevTools and watch the Network tab while you search to confirm there are zero requests.

Embed this tool

Free for any use; attribution appreciated. Paste this on your site:

The embed runs the same tool that lives at this URL. No tracking; no ads inside the embed. Resize height as needed for your layout.

Cite this tool

For academic, journalistic, or technical references. Pick a format:

Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.

Embedded tool from glunty.com