Professional Documents
Culture Documents
Emmet Cheat Sheet
Emmet Cheat Sheet
Emmet Documentation
Syntax
Child: >
nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
h$[title=item$]{Header $}*3
Sibling: +
div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
ul>li.item$$$*5
Climb-up: ^
div+div>p>span+em^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
div+div>p>span+em^^bq
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Grouping: ()
.title
form#search.wide
p.class1.class2.class3
div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
Custom attributes
p[title="Hello world"]
[a='value1' b="value2"]
(div>dl>(dt+dd)*3)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
Text: {}
a{Click me}
Cheat Sheet
<footer>
<p></p>
</footer>
.class
em>.class
Multiplication: *
ul>li*5
ul>.class
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
table>.row>.col
Item numbering: $
ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
unknown abbreviations will be
</ul>
HTML
All
!
Alias of html:5
cap
colg
fst, fset
btn
a:mail
<a href="mailto: "> </a>
<div class="title"></div>
abbr
optg
opt
base
<base href=" " />
bdo<p title="Hello world"></p>
<bdo dir=" "> </bdo>
bdo:r
<td rowspan="2" colspan="3" title=""></td>
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
tarea
Cheat Sheet
<bdo dir="rtl"> </bdo>
leg
bdo:l
<div a="value1" b="value2"></div>
<bdo dir="ltr"> </bdo>
link
sect
art
link:print
<link rel="stylesheet" href=" print .css"
media="print" />
<div class="class"></div>
hdr
link:favicon
<link rel="shortcut icon" type="image/x-icon"
favicon.ico
" />
href="
<em><span
class="class"></span></em>
ftr
link:touch
<link
<ul> rel="apple-touch-icon" href=" favicon.png "
/> <li class="class"></li>
</ul>
adr
link:rss
<link rel="alternate" type="application/rss+xml"
title="RSS" href=" rss.xml " />
<table>
<tr class="row">
link:atom <td class="col"></td>
<link</tr>
rel="alternate" type="application/atom+xml"
</table>
title="Atom"
href=" atom.xml " />
meta:utf
dlg
str
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
meta:win
<meta http-equiv="Content-Type"
content="text/html;charset=windows-1251" />
prog
meta:compat
<meta http-equiv="X-UA-Compatible" content=" IE=7
" />
datag
style
<style> </style>
datal
script
<script> </script>
script:src
kg
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
out
Cheat Sheet
embed
det
cmd
param
<param name=" " value=" " />
ol+
map
<map name=" "> </map>
area
<area shape=" " coords=" " href=" " alt=" " />
area:d
ul+
map+
table+
label
<label for=" "> </label>
input
<input type=" " />
colgroup+, colg+
input:hidden, input:h
<input type="hidden" name=" " />
input:text, input:t
<input type="text" name=" " id=" " />
input:search
tr+
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
select+
Cheat Sheet
input:password, input:p
<input type="password" name=" " id=" " />
input:datetime
optgroup+, optg+
cc:ie6
cc:noie
input:color
<input type="color" name=" " id=" " />
html:4t
input:checkbox, input:c
<input type="checkbox" name=" " id=" " />
input:radio, input:r
<input type="radio" name=" " id=" " />
input:range
<input type="range" name=" " id=" " />
input:file, input:f
<input type="file" name=" " id=" " />
input:submit, input:s
<input type="submit" value=" " />
html:4s
input:image, input:i
<input type="image" src=" " alt=" " />
input:reset
<input type="reset" value=" " />
input:button, input:b
<input type="button" value=" " />
select
<select name=" " id=" "> </select>
html:xt
option
<option value=" "> </option>
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
Cheat Sheet
textarea
<textarea name=" " id=" " cols=" 30 " rows=" 10 ">
</textarea>
menu:context, menu:c
<menu type="context"> </menu>
menu:toolbar, menu:t
<menu type="toolbar"> </menu>
video
<video src=" "> </video>
html:xs
audio
<audio src=" "> </audio>
html:xml
<html xmlns="http://www.w3.org/1999/xhtml">
</html>
bq
Alias of blockquote
<blockquote> </blockquote>
acr
Alias of acronym
html:xxs
fig
Alias of figure
<figure> </figure>
figc
Alias of figcaption
<figcaption> </figcaption>
ifr
Alias of iframe
html:5
emb
Alias of embed
<source> </source>
CSS
CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh.
Alias of caption
Cheat Sheet
<caption> </caption>
You can prefix abbreviations with hyphen to produce vendor-prefixed properties: -foo
Visual
Formatting
Alias of colgroup
pos<colgroup> </colgroup>
position: ;
pos:s
position:static;
pos:a
position:absolute;
Alias of fieldset
<fieldset> </fieldset>
pos:r
position:relative;
pos:f
t
position:fixed;
Alias of buttontop: ;
<button> </button>
t:a
top:auto;
r
right: ;
r:aAlias of optgroup
right:auto;
<optgroup> </optgroup>
b
bottom: ;
b:a
l
bottom:auto;
Alias of option
left: ;
<option value=" "> </option>
l:a
left:auto;
whsc:bs
whsc:ba
wob
wob:n
wob:k
wob:l
wob:bs
wob:ba
wos
wow
wow:nm
wow:n
wow:u
wow:s
z-index: ;
Alias of textarea
z:a
Background
z-index:auto;
<textarea name="
" id=" " cols=" 30 " rows=" 10 ">
</textarea>
fl
float: ;
bg
fl:n
bg+
float:none;
Alias of legendfloat:left;
fl:l
<legend> </legend>
fl:r
float:right;
cl
clear: ;
Alias of section
cl:n
clear:none;
<section> </section>
cl:l
clear:left;
cl:r
clear:right;
Alias of article
cl:b
clear:both;
<article> </article>
d
display: ;
d:n
display:none;
Alias of header
d:b<header> </header>
display:block;
d:i
display:inline;
d:ib
Alias of footerdisplay:inline-block;
<footer> </footer>
d:li
display:list-item;
d:ri
display:run-in;
d:cp
Alias of address
display:compact;
<address> </address>
d:tb
display:table;
d:itb
display:inline-table;
Alias of dialog
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
bg:n
bgc
bgi
bgi:n
bgr
bgr:n
bgr:x
bgr:y
bga
bga:f
bga:s
bgp
bgpx
bgpy
bgbk
bgbk:bb
bgbk:eb
Cheat Sheet
d:tbcp
display:table-caption;
<dialog> </dialog>
d:tbcl
display:table-column;
d:tbclg
display:table-column-group;
Alias of strong
d:tbhg
display:table-header-group;
<strong> </strong>
d:tbfg
display:table-footer-group;
d:tbr
display:table-row;
Alias of progress
d:tbrg
display:table-row-group;
<progress> </progress>
d:tbc
display:table-cell;
d:rb
display:ruby;
Alias of datagrid
d:rbb
<datagrid> </datagrid>
display:ruby-base;
d:rbbg
display:ruby-base-group;
d:rbt
display:ruby-text;
Alias of datalist
<datalist> </datalist>
d:rbtg
display:ruby-text-group;
v
visibility: ;
bgbk:c
bgcp
bgcp:bb
bgcp:pb
bgcp:cb
bgcp:nc
bgo
bgo:pb
bgo:bb
bgo:cb
bgz
bgz:a
bgz:ct
bgz:cv
v:vAlias of keygenvisibility:visible;
v:h
<keygen />
v:c
ov
visibility:hidden;
visibility:collapse;
Alias of output
overflow: ;
<output> </output>
ov:v
overflow:visible;
ov:h
overflow:hidden;
Alias of details
ov:s
overflow:scroll;
<details> </details>
ov:a
overflow:auto;
ovx
overflow-x: ;
Alias of command
ovx:v
<command />
overflow-x:visible;
ovx:h
overflow-x:hidden;
ovx:s
overflow-x:scroll;
Alias of ol>li
<ol>
ovx:a
overflow-x:auto;
<li> </li>
ovy</ol>
overflow-y: ;
ovy:v
overflow-y:visible;
ovy:h
Alias of ul>li overflow-y:hidden;
<ul>
ovy:s
Color
c
op
Generated content
cn, ct
ct:n
ct:oq
ct:noq
ct:cq
ct:ncq
ct:a
ct:c
ct:cs
q
q:n
overflow-y:scroll;
<li> </li>
ovy:a
overflow-y:auto;
</ul>
q:ru
ovs
q:en
overflow-style: ;
ovs:a
overflow-style:auto;
Alias of dl>dt+dd
<dl>
ovs:s
overflow-style:scrollbar;
<dt> </dt>
ovs:p <dd> </dd>overflow-style:panner;
</dl>
ovs:m
overflow-style:move;
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
coi
cor
Outline
Cheat Sheet
ovs:mq
zoo
overflow-style:marquee;
Alias of map>area
zoom:1;
<map name=" ">
<area shape="
cp
clip:" ;coords=" " href=" " alt=" " />
</map>
cp:a
clip:auto;
o:n
cp:r
os
rz
clip:rect( );
Alias of table>tr>td
<table>
<tr>
rz:n
resize: ;
resize:none;
<td> </td>
rz:b
resize:both;
</tr>
</table>
rz:h
resize:horizontal;
ow
oc
oc:i
Tables
tbl
rz:v
cur
oo
resize:vertical;
Alias of colgroup>col
<colgroup>
cur:a <col />
</colgroup>
cur:d
tbl:a
cursor: ;
tbl:f
cursor:auto;
cps
cursor:default;
cps:t
cur:c
cursor:crosshair;
Alias of tr>td
cur:ha
cursor:hand;
<tr>
cur:he <td> </td>cursor:help;
</tr>
cur:m
cursor:move;
cps:b
ec
ec:s
ec:h
cur:p
cursor:pointer;
Alias of select>option
cur:t
cursor:text;
<select name=" " id=" ">
<option value=" "> </option>
</select>
Margin
& Padding
m
Border
bd
bd+
margin: ;
m:aAlias of optgroup>option
margin:auto;
mt <optgroup>
margin-top: ;
<option value=" "> </option>
mt:a
</optgroup>
margin-top:auto;
bd:n
bdbk
bdbk:c
bdcl
mr
margin-right: ;
<!-mr:a
${child}margin-right:auto;
-->
bdcl:c
bdcl:s
mb
margin-bottom: ;
bdc
bdi
bdi:n
margin-left:auto;
bdti
bdti:n
bdri
pr
padding-right: ;
pb <!--[if !IE]><!-->
padding-bottom: ;
${child}
pl <!--<![endif]-->
padding-left: ;
Box Sizing
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
bdri:n
bdbi
bdbi:n
bdli
Cheat Sheet
bxzTransitional//EN"
box-sizing: ;
"http://www.w3.org/TR/html4/loose.dtd">
bxz:cb
box-sizing:content-box;
<html lang="${lang}">
<head>
bxz:bb
box-sizing:border-box;
<meta http-equiv="Content-Type"
bxsh
content="text/html;charset=${charset}">
box-shadow: hoff
voff
radius
<title> Document
color ;</title>
</head>
bxsh:n
box-shadow:none;
<body>
${child}
w
width: ;
</body>
w:a</html>
width:auto;
bdli:n
bdci
bdci:n
bdci:c
bdtli
bdtli:n
bdtli:c
bdtri
height: ;
bdtri:n
h:a
content="text/html;charset=${charset}">
max-height:
;
</title>
<title> Document
</head>
mah:n
max-height:none;
<body>
${child} min-width: ;
miw
</body>
mih</html>
min-height: ;
bdtri:c
bdbri
bdbri:n
mah
"http://www.w3.org/TR/xhtml1/DTD/xhtml1f+
font: 1em
Arial,sans-serif ;
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
fw
font-weight: ;
xml:lang="${lang}">
<head>
fw:n
font-weight:normal;
<meta http-equiv="Content-Type"
fw:b
font-weight:bold;
content="text/html;charset=${charset}"
/>
<title></title>
fw:br
font-weight:bolder;
</head>
<body>
fw:lr
font-weight:lighter;
${child}
fs </body>
font-style: ;
</html>
fs:n
font-style:normal;
fs:i
font-style:italic;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
fs:o
Strict//EN"
font-style:oblique;
"http://www.w3.org/TR/xhtml1/DTD/xhtml1fv strict.dtd"> font-variant: ;
<html xmlns="http://www.w3.org/1999/xhtml"
fv:n
font-variant:normal;
xml:lang="${lang}">
<head>
fv:sc
font-variant:small-caps;
<meta http-equiv="Content-Type"
fz content="text/html;charset=${charset}"
/>
font-size: ;
<title> Document </title>
fza</head>
font-size-adjust: ;
<body>
fza:n
${child}
</body>
ff
</html>
ff:s
bdbli
bdbli:n
bdbli:c
bdf
Font
f
bdbri:c
bdf:c
bdf:r
bdf:sc
bdf:st
bdf:ow
bdf:of
bdf:sp
bdl:a
bdsp
bds
bds:n
bds:h
bds:dt
bds:ds
bds:s
bds:db
font-size-adjust:none;
bds:dtds
font-family: ;
bds:dtdtds
font-family:serif;
bds:w
ff:ss
font-family:sans-serif;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
bds:g
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
Cheat Sheet
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
ff:c
font-family:cursive;
<html xmlns="http://www.w3.org/1999/xhtml"
ff:f
font-family:fantasy;
xml:lang="${lang}">
<head>
ff:m
font-family:monospace;
<meta http-equiv="Content-Type"
content="text/html;charset=${charset}" />
fef
font-effect: ;
<title> Document </title>
</head>
fef:n
font-effect:none;
<body>
fef:eg ${child} font-effect:engrave;
bds:r
bds:i
bds:o
bdw
bdt, bt
bdt+
</body>
fef:eb
</html>
font-effect:emboss;
bdt:n
fef:o
font-effect:outline;
bdtw
fem<!doctype html>
font-emphasize: ;
<html lang="${lang}">
femp
font-emphasize-position: ;
<head>
femp:b <meta charset="${charset}">
font-emphasize-position:before;
<title> Document </title>
femp:a
</head>
font-emphasize-position:after;
<body>
fems
${child} font-emphasize-style: ;
bdts
bdts:n
bdtc
bdr, br
bdr+
</body>
fems:n
</html>
font-emphasize-style:none;
bdr:n
fems:ac
font-emphasize-style:accent;
bdrw
fems:dt
font-emphasize-style:dot;
bdrs:n
fems:c
font-emphasize-style:circle;
bdrc
fems:ds
font-emphasize-style:disc;
bdb, bb
fsm
font-smooth: ;
bdb+
fsm:a
font-smooth:auto;
bdb:n
fsm:n
font-smooth:never;
bdbw
fsm:aw
font-smooth:always;
bdbs
fst
font-stretch: ;
bdbs:n
fst:n
font-stretch:normal;
bdbc
fst:uc
font-stretch:ultra-condensed;
bdl, bl
fst:ec
font-stretch:extra-condensed;
bdl+
fst:c
font-stretch:condensed;
bdl:n
fst:sc
font-stretch:semi-condensed;
bdlw
fst:se
font-stretch:semi-expanded;
bdls
fst:e
font-stretch:expanded;
bdls:n
fst:ee
font-stretch:extra-expanded;
bdlc
fst:ue
font-stretch:ultra-expanded;
bdrs
bdtrrs
Text
bdtlrs
va
vertical-align: ;
va:sup
vertical-align:super;
va:t
vertical-align:top;
va:tt
vertical-align:text-top;
bdbrrs
bdblrs
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
Cheat Sheet
Lists
va:m
vertical-align:middle;
lis
va:bl
vertical-align:baseline;
lis:n
va:b
vertical-align:bottom;
lisp
va:tb
vertical-align:text-bottom;
lisp:i
va:sub
vertical-align:sub;
lisp:o
ta
text-align: ;
list
ta:l
text-align:left;
list:n
ta:c
text-align:center;
list:d
ta:r
text-align:right;
list:c
tal
text-align-last: ;
list:s
tal:a
text-align-last:auto;
list:dc
tal:l
text-align-last:left;
list:dclz
tal:c
text-align-last:center;
tal:r
text-align-last:right;
td
text-decoration: ;
td:n
text-decoration:none;
td:u
text-decoration:underline;
td:o
text-decoration:overline;
td:l
text-decoration:line-through;
pgbb
te
text-emphasis: ;
pgbb:au
te:n
text-emphasis:none;
pgbb:al
te:ac
text-emphasis:accent;
pgbb:l
te:dt
text-emphasis:dot;
pgbb:r
te:c
text-emphasis:circle;
pgbi
te:ds
text-emphasis:disc;
pgbi:au
te:b
text-emphasis:before;
pgbi:av
te:a
text-emphasis:after;
pgba
th
text-height: ;
pgba:au
th:a
text-height:auto;
pgba:al
th:f
text-height:font-size;
pgba:l
th:t
text-height:text-size;
pgba:r
th:m
text-height:max-size;
orp
ti
text-indent: ;
wid
ti:-
text-indent:-9999px;
tj
text-justify: ;
tj:a
text-justify:auto;
list:lr
list:ur
lisi
lisi:n
Others
!
@f
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
Cheat Sheet
tj:iw
text-justify:inter-word;
tj:ii
text-justify:inter-ideograph;
tj:ic
text-justify:inter-cluster;
tj:d
text-justify:distribute;
tj:k
text-justify:kashida;
tj:t
text-justify:tibetan;
to
text-outline: ;
to+
text-outline: 0
to:n
text-outline:none;
tr
text-replace: ;
tr:n
text-replace:none;
tt
text-transform: ;
tt:n
text-transform:none;
tt:c
text-transform:capitalize;
tt:u
text-transform:uppercase;
tt:l
text-transform:lowercase;
tw
text-wrap: ;
cm
tw:n
text-wrap:normal;
op:ie
tw:no
text-wrap:none;
tw:u
text-wrap:unrestricted;
tw:s
text-wrap:suppress;
tsh
text-shadow: hoff
#000 ;
@f+
#000 ;
@i
@m
bg:ie
op:ms
voff
blur
trf
trf:r
tsh+
text-shadow: 0
tsh:n
text-shadow:none;
trf:scx
lh
line-height: ;
trf:scy
lts
letter-spacing: ;
trf:skx
whs
white-space: ;
trf:sky
whs:n
white-space:normal;
trf:t
whs:p
white-space:pre;
trf:tx
whs:nw
white-space:nowrap;
trf:ty
whs:pw
white-space:pre-wrap;
trs
whs:pl
white-space:pre-line;
trsde
whsc
white-space-collapse: ;
trsdu
whsc:n
white-space-collapse:normal;
trsp
whsc:k
white-space-collapse:keep-all;
trstf
whsc:l
white-space-collapse:loose;
#000 ;
white-space-collapse:break-strict;
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
trf:sc
Cheat Sheet
XSL
white-space-collapse:break-all;
tm
word-break: ;
elem
word-break:keep-all;
attr
Alias of tm
tn
word-break:loose;
<xsl:template match=" " mode=" "> </xsl:template>
word-break:break-strict;
attrs
word-break:break-all;
<xsl:template name=" "> </xsl:template>
word-spacing: ;
cp
tname
word-wrap: ;
Alias of tn
co
word-wrap:normal;
<xsl:template name=" "> </xsl:template>
word-wrap:none;
call
val
word-wrap:unrestricted;
<xsl:call-template
name=" " />
word-wrap:suppress;
ap
each
<xsl:apply-templates select=" " mode=" " />
api
imp
background: ;
<xsl:apply-imports />
background: #fff
no-repeat ;
for
url( )
<xsl:import href="
" />
background:none;
inc
<xsl:include href="
" />
background-image:url(
);
<xsl:choose> </xsl:choose>
background-repeat: ;
xsl:when
msg
background-repeat:no-repeat;
fall
background-repeat:repeat-y;
wh
Alias of xsl:when
if
com
background-image:none;
ch
ot
tex
background-color:# fff ;
background-attachment: ;
<xsl:when test=" "> </xsl:when>
background-attachment:fixed;
num
background-attachment:scroll;
<xsl:otherwise> </xsl:otherwise>
background-position: 0
0 ;
nam
background-position-x: ;
<xsl:if test=" "> </xsl:if>
pres
background-position-y: ;
par
background-break: ;
<xsl:param name=" "> </xsl:param>
strip
background-break:bounding-box;
pare
background-break:each-box;
<xsl:param name=" " select=" " />
proc
background-break:continuous;
var
;
<xsl:variable background-clip:
name=" "> </xsl:variable>
background-clip:border-box;
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
sort
Cheat Sheet
vare
<xsl:variable background-clip:padding-box;
name=" " select=" " />
wp
background-clip:content-box;
background-clip:no-clip;
<xsl:with-param
name=" " select=" " />
key
background-origin: ;
<xsl:key name="
" match=" " use=" " />
background-origin:padding-box;
background-origin:border-box;
<xsl:element name="
"> </xsl:element>
background-origin:content-box;
background-size: ;
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
choose+