1 Emmet | Cheat Sheet (2017-03) SYNTAX Syntax ...... 1 Child: > Child: > ...... 1 nav>ul>li

Sibling: + ...... 1

Climb-up: ^ . . . . . 1 .

Grouping: () . . . . . 1 .

Multiplication: * . . . .2 . Sibling: + Naming and numbering: $ 2 div+p+bq ID and CLASS attributes . 2.

Custom attributes . . . 2.

Text: {} ...... 2 . Climb-up: ^ Implicit tag names . . . . . 2 div+div>p>span+em^bq HTML . . . . . 3.

Form, Input, Button . . .4 .

CSS ...... 7 .

Visual Formatting . . . 7. div+div>p>span+em^^bq Margin & Padding . . . 9.

Box Sizing ...... 9 .

Font ...... 9. .

Text ...... 11 Grouping: () Background . . . . .13 . Color ...... 14 . div>(header>ul>li*2>a)+footer>p

Generated content . . . 14

Outline ...... 15. .
Tables ...... 15. .

Border ...... 15. .

Lists ...... 18 .

Print ...... 18 .

Others ...... 18. . (div>dl>(dt+dd)*3)+footer>p Animation . . . . . 19.

Flex ...... 20

Transform, Transition . . 21

XSL . . . . . 22. .

HTML DOCTYPES . 23

http://docs .emmet .io/ 2 Multiplication: * ID and CLASS attributes ul>li*5 #header

.title
form#search.wide

Naming and numbering: $ p.class1.class2.class3 ul>li.sample$*5

Custom attributes
p[title="Hello world"]

td[rowspan=2 colspan=3 title]

Headline 1

Headline 2

[a=‘value1‘ b="value2"]

Headline 3

ul>li.item$$$*5 Text: {}

a{Click me}
Click me
p>{Click }+a{here}+{ to continue}

Click here to

continue

ul>li.item$@-*5 Implicit tag names

.class
em>.class
em> ul>li.item$@3*5 ul>.class
table>.row>.col
3 HTML link:rss . type="application/rss+xml" title="RSS" href="rss.xml" /> a link:atom title="Atom" href="atom.xml" /> a:mail link:import, link:im abbr meta acronym, acr meta:utf html;charset=UTF-8" /> basefont meta:win frame meta:vp meta:compat bdo:r content="IE=7" /> bdo:l style col script link script:src link:css img href="style.css" /> img:srcset, img:s link:print img:sizes, img:z link:touch source, src href="favicon.png" /> source:src, src:sc 4 source:srcset, src:s Form, Input, Button form source:media, src:m form:get
form:post source:sizes, src:z form> source:media:type, src:mt label srcset="" type="image/" /> input source:media:sizes, src:mz inp input:hidden, input:h iframe