Introduction

Emmet is a common built-in software for text editors that dramatically speeds up coding in HTML (or XML, XSLT, and other structured formats) by using CSS-like abbreviations and shortcuts that expand into full code blocks. It essentially allows developers to write less code while still achieving the same output.

– Wikipedia Emmet

Expand Abbreciation

You may use emmet to write very short abbreviated snippet that will expand to a proper HTML element(s), listed below are some of the very common use cases:

(* You can find more about this in: Emmet Official Documentation: Expand Abbreviation)

Emmet SyntaxDescription
!Generates a complete HTML5 document
divCreates a <div> element
ul>li*5Creates a <ul> with 5 <li> items
a[href]Creates an <a> element with an href attribute
img[src]Creates an <img> element with a src attribute
h1Creates an <h1> element
p*3Creates 3 <p> elements
header>nav>ul>li*3Creates a nested structure of elements
section>h2+pCreates a <section> with an <h2> and a <p>
classAdds a class to an element (e.g., div.class-name)
idAdds an ID to an element (e.g., div#id-name)
>Parent-child relationship
+Sibling relationship
*Multiplication (number of elements), In “wrap with abbreviation” mode, it will wrap every single line selected with what comes before the * sign

Wrap with Abbreviation

In code editor with emmet built in like Visual Studio Code (see: Emmet in Visual Studio Code), you can use emmet syntax to wrap cursor selection with provided abbreviation/snippets.

(*You can find more about this in: Emmet Official Documentation: Wrap with Abbreviation)

Option-1: Wrap whole selection

1

nav>ul.nav>li.nav-item>a

2025-07-28T164426

Option-2: Wrap multiple lines with pattern

1
2
3

nav>ul.nav>li.nav-item>a*
↑ 
notice the additional astrik sign (*)

2025-07-28T164530

CSS Abbreviations

Not only can you use emmet abbreviation in HTML, you may also use it in CSS. For CSS syntax, Emmet has a lot of predefined snippets for properties. For example, you can expand m5p abbreviation to get margin:5%.

( * You read this post: Emmet Official Documentation: CSS Abbreviations)

Snippet with Value

By default, when you expand an abbreviation with integer value, Emmet outputs it with a px unit: m10 → margin: 10px;. If you’re expanding an abbreviation with a float value, it is outputted with an em unit: m1.5 → margin: 1.5em;. But you can explicitly provide the unit name, just by putting any alpha characters right after value: m1.5ex→ margin: 1.5ex;, m10foo → margin: 10foo;.

If you’re explicitly defining units, you don’t need to use hyphens to separate values anymore: m10ex20em → margin: 10ex 20em;, m10ex-5 → margin: 10ex -5px;

Value Aliases

Emmet has a few aliases for commonly used values:

  • p → % (e.g. w100p → width: 100%)
  • e → em (e.g. m10p30e5x → margin: 10% 30em 5ex)
  • x → ex (e.g. m10p30e5x → margin: 10% 30em 5ex)

Some CSS properties are defined as unit-less, e.g. no unit suffix will be outputted: lh2 → line-height: 2;, fw400→ font-weight: 400;. These values are: 'z-index, line-height, opacity and font-weight but you can override them with css.unitlessProperties preferences.

!important modifier

You can add ! suffix at the end of any CSS abbreviation to get !important value:

p10px!+m10e! → padding:10px !important; margin:10em !important;

Reference