coderef

HTML & CSS Abbreviations

Write HTML and CSS at the speed of thought: type a short abbreviation, get full markup. Try abbreviations live below and browse all 491 built-in abbreviations with their real expansions.
How to use abbreviationsShow guide ▾

1. The idea

Write a short CSS-selector-like abbreviation and expand it into full code. ul>li*3 becomes a list with three items; m10 becomes margin: 10px; in a stylesheet.

2. VS Code (built in)

  • Type an abbreviation in an HTML/CSS file and pick the Emmet suggestion, or press Tab after enabling "emmet.triggerExpansionOnTab": true.
  • Wrap a selection: run Emmet: Wrap with Abbreviation from the Command Palette (Ctrl/Cmd+Shift+P).
  • Use it in JSX/other files with "emmet.includeLanguages", e.g. { "javascript": "javascriptreact" }.

3. Other editors

  • JetBrains (WebStorm, IntelliJ, PhpStorm): built in — type and press Tab.
  • Sublime Text, Vim, Neovim, Notepad++: install the Emmet plugin — emmet.io/download ↗.
  • Full reference: docs.emmet.io ↗

4. This page

  • Type in the playground and pick an output syntax (HTML, JSX, Pug, CSS, SCSS…).
  • Browse the index: Syntax explains the operators, HTML and CSS list every built-in abbreviation. Click any entry — or a keyword chip like d:ib — to try it.
  • The URL updates as you type, so you can share an expansion.

Playground

Type an abbreviation — it expands as you type
Try:
Output · HTML
<ul>
  <li class="item1"><a href="#">Item 1</a></li>
  <li class="item2"><a href="#">Item 2</a></li>
  <li class="item3"><a href="#">Item 3</a></li>
</ul>

Abbreviation index

Every abbreviation Emmet ships with, and exactly what it expands to. Click one to open it in the playground.

Nesting operators

Grouping

Multiplication

Item numbering

ID & class

Attributes

Text

Implicit tag names

Lorem ipsum

CSS values

Expansions are produced by the official emmet engine (MIT), the same one used by VS Code.