Emmet Cheatsheet

Type abbreviation → Tab to expand

div           →  <div></div>
p             →  <p></p>
h1            →  <h1></h1>
a             →  <a href=""></a>
img           →  <img src="" alt="">
input         →  <input type="text">
btn           →  <button></button>
link:css      →  <link rel="stylesheet" href="style.css">
script:src    →  <script src=""></script>

HTML boilerplate
!             →  full HTML5 template
html:5        →  full HTML5 template

Child: >
ul>li              →  <ul><li></li></ul>
nav>ul>li>a        →  nested nav structure

Sibling: +
h1+p               →  <h1></h1><p></p>
header+main+footer →  three siblings

Climb up: ^
div>p>span^p       →  span inside first p, second p is sibling of first p

Grouping: ()
(header>nav)+(main>article)+(footer>p)
ul>(li>a)*3        →  3 list items with links

Multiply: *
li*5               →  5 <li> elements
ul>li*3            →  ul with 3 li children
div.item*4         →  4 divs with class "item"
table>tr*3>td*4    →  3 rows × 4 columns

Item numbering: $
li.item$*3         →  item1, item2, item3
h2{Title $}*3      →  Title 1, Title 2, Title 3
li.item$$*5        →  item01, item02, ... item05

Reverse: @-
li.item$@-*3       →  item3, item2, item1

Start from: @N
li.item$@3*3       →  item3, item4, item5

ID: #
div#header         →  <div id="header"></div>

Class: .
div.container      →  <div class="container"></div>
div.foo.bar        →  <div class="foo bar"></div>

Custom attributes: []
a[href="#" target="_blank"]
input[type="email" placeholder="Email"]
td[colspan=2]

Combined
div#app.container.dark[data-theme="dark"]

Text content: {}
p{Hello World}       →  <p>Hello World</p>
a{Click me}          →  <a href="">Click me</a>
h1{Title}+p{Desc}
ul>li{Item $}*3      →  Item 1, Item 2, Item 3

Properties
m10     →  margin: 10px;
p20     →  padding: 20px;
w100    →  width: 100px;
h50     →  height: 50px;
fz16    →  font-size: 16px;
fw700   →  font-weight: 700;
lh1.5   →  line-height: 1.5;
c#333   →  color: #333;
bgc#fff →  background-color: #fff;

Units
m10p    →  margin: 10%;
m10e    →  margin: 10em;
m10r    →  margin: 10rem;

Display & Position
d:f     →  display: flex;
d:g     →  display: grid;
pos:r   →  position: relative;
pos:a   →  position: absolute;

Lorem ipsum
lorem           →  30 words of lorem ipsum
lorem10         →  10 words
p*3>lorem       →  3 paragraphs with lorem

Wrap with abbreviation (Cmd+Shift+P → Emmet: Wrap)
Select text → wrap with ul>li*
Each line becomes a list item