Emmet cheat-sheet

Cheat Sheet
http://docs.emmet.io/cheat-sheet/[17/02/2013 12:03:50]
← Emmet Documentation
Syntax
Child: >
nav>ul>li
Sibling: +
div+p+bq
Climb-up: ^
div+div>p>span+em^bq
div+div>p>span+em^^bq
Grouping: ()
div>(header>ul>li*2>a)+footer>p
(div>dl>(dt+dd)*3)+footer>p
h$[title=item$]{Header $}*3
ul>li.item$$$*5
ID and CLASS attributes
#header
.title
form#search.wide
p.class1.class2.class3
Custom attributes
p[title="Hello world"]
td[rowspan=2 colspan=3 title]
[a='value1' b="value2"]
Text: {}
a{Click me}
p>{Click }+a{here}+{ to continue}
Implicit tag names
<nav>
<ul>
<li></li>
</ul>
</nav>
<div></div>
<p></p>
<blockquote></blockquote>
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>

Cheat Sheet
Multiplication: *
ul>li*5
Item numbering: $
ul>li.item$*5
.class
em>.class
ul>.class
table>.row>.col
HTML
All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>.
!
a
a:link
a:mail
abbr
acronym
base
bdo
bdo:r
cap
colg
fst, fset
btn
optg
opt
tarea
<footer>
<p></p>
</footer>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li class="item1"></li>
</ul>
<h1 title="item1">Header 1</h1>
<ul>
</ul>
<div id="header"></div>
<div class="title"></div>
<form id="search" class="wide"></form>
<p class="class1 class2 class3"></p>
<p title="Hello world"></p>
<td rowspan="2" colspan="3" title=""></td>
Alias of html:5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Document </title>
</head>
<body>
</body>
</html>
<a href=" "> </a>
<a href="http:// "> </a>
<a href="mailto: "> </a>
<abbr title=" "> </abbr>
<acronym title=" "> </acronym>
<base href=" " />
<bdo dir=" "> </bdo>

Cheat Sheet
bdo:l
link
link:css
link:print
link:favicon
link:touch
link:rss
link:atom
meta:utf
meta:win
meta:compat
style
script
script:src
img
iframe
leg
sect
art
hdr
ftr
adr
dlg
str
prog
datag
datal
kg
out
<div a="value1" b="value2"></div>
<a href="">Click me</a>
<p>Click <a href="">here</a> to continue</p>
<div class="class"></div>
<em><span class="class"></span></em>
<ul>
<li class="class"></li>
</ul>
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
<bdo dir="rtl"> </bdo>
<bdo dir="ltr"> </bdo>
<link rel="stylesheet" href=" " />
<link rel="stylesheet" href=" style .css"
media="all" />
<link rel="stylesheet" href=" print .css"
media="print" />
<link rel="shortcut icon" type="image/x-icon"
href=" favicon.ico " />
<link rel="apple-touch-icon" href=" favicon.png "
/>
<link rel="alternate" type="application/rss+xml"
title="RSS" href=" rss.xml " />
<link rel="alternate" type="application/atom+xml"
title="Atom" href=" atom.xml " />
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
content="text/html;charset=windows-1251" />
<meta http-equiv="X-UA-Compatible" content=" IE=7
" />
<style> </style>
<script> </script>
<script src=" "> </script>
<img src=" " alt=" " />
<iframe src=" " frameborder="0"> </iframe>

Cheat Sheet
embed
object
param
map
area
area:d
area:c
area:r
area:p
form
form:get
form:post
label
input
input:hidden, input:h
input:text, input:t
input:search
input:email
input:url
det
cmd
ol+
ul+
dl+
map+
table+
colgroup+, colg+
tr+
select+
<embed src=" " type=" " />
<object data=" " type=" "> </object>
<param name=" " value=" " />
<map name=" "> </map>
<area shape=" " coords=" " href=" " alt=" " />
<area shape="default" href=" " alt=" " />
<area shape="circle" coords=" " href=" " alt=" "
/>
<area shape="rect" coords=" " href=" " alt=" " />
<area shape="poly" coords=" " href=" " alt=" " />
<form action=" "> </form>
<form action=" " method="get"> </form>
<form action=" " method="post"> </form>
<label for=" "> </label>
<input type=" " />
<input type="hidden" name=" " />
<input type="text" name=" " id=" " />
<input type="search" name=" " id=" " />
<input type="email" name=" " id=" " />
<input type="url" name=" " id=" " />

Cheat Sheet
input:password, input:p
input:datetime
input:date
input:datetime-local
input:month
input:week
input:time
input:number
input:color
input:checkbox, input:c
input:radio, input:r
input:range
input:file, input:f
input:submit, input:s
input:image, input:i
input:reset
input:button, input:b
select
option
optgroup+, optg+
c
cc:ie6
cc:ie
cc:noie
html:4t
html:4s
html:xt
<input type="password" name=" " id=" " />
<input type="datetime" name=" " id=" " />
<input type="date" name=" " id=" " />
<input type="datetime-local" name=" " id=" " />
<input type="month" name=" " id=" " />
<input type="week" name=" " id=" " />
<input type="time" name=" " id=" " />
<input type="number" name=" " id=" " />
<input type="color" name=" " id=" " />
<input type="checkbox" name=" " id=" " />
<input type="radio" name=" " id=" " />
<input type="range" name=" " id=" " />
<input type="file" name=" " id=" " />
<input type="submit" value=" " />
<input type="image" src=" " alt=" " />
<input type="reset" value=" " />
<input type="button" value=" " />
<select name=" " id=" "> </select>
<option value=" "> </option>

Cheat Sheet
textarea
menu:context, menu:c
menu:toolbar, menu:t
video
audio
html:xml
bq
acr
fig
figc
ifr
emb
obj
src
html:xs
html:xxs
html:5
CSS
CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh.
If abbreviation wasn’t found, it is transformed into property name: foo-bar → foo-bar: |;
<textarea name=" " id=" " cols=" 30 " rows=" 10 ">
</textarea>
<menu type="context"> </menu>
<menu type="toolbar"> </menu>
<video src=" "> </video>
<audio src=" "> </audio>
<html xmlns="http://www.w3.org/1999/xhtml">
</html>
Alias of blockquote
<blockquote> </blockquote>
Alias of acronym
<acronym title=" "> </acronym>
Alias of figure
<figure> </figure>
Alias of figcaption
<figcaption> </figcaption>
Alias of iframe
<iframe src=" " frameborder="0"> </iframe>
Alias of embed
<embed src=" " type=" " />
Alias of object
<object data=" " type=" "> </object>
Alias of source
<source> </source>
Alias of caption

Cheat Sheet
pos
pos:s
pos:a
pos:r
pos:f
t
t:a
r
r:a
b
b:a
l
l:a
z
z:a
fl
fl:n
fl:l
fl:r
cl
cl:n
cl:l
cl:r
cl:b
d
d:n
d:b
d:i
d:ib
d:li
d:ri
d:cp
d:tb
d:itb
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
bg
bg+
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
You can prefix abbreviations with hyphen to produce vendor-prefixed properties: -foo
Visual Formatting
Background
<caption> </caption>
Alias of colgroup
<colgroup> </colgroup>
Alias of fieldset
<fieldset> </fieldset>
Alias of button
<button> </button>
Alias of optgroup
<optgroup> </optgroup>
Alias of option
Alias of textarea
<textarea name=" " id=" " cols=" 30 " rows=" 10 ">
</textarea>
Alias of legend
<legend> </legend>
Alias of section
<section> </section>
Alias of article
<article> </article>
Alias of header
<header> </header>
Alias of footer
<footer> </footer>
Alias of address
<address> </address>
Alias of dialog
position: ;
position:static;
position:absolute;
position:relative;
position:fixed;
top: ;
top:auto;
right: ;
right:auto;
bottom: ;
bottom:auto;
left: ;
left:auto;
z-index: ;
z-index:auto;
float: ;
float:none;
float:left;
float:right;
clear: ;
clear:none;
clear:left;
clear:right;
clear:both;
display: ;
display:none;
display:block;
display:inline;
display:inline-block;
display:list-item;
display:run-in;
display:compact;
display:table;
display:inline-table;

Cheat Sheet
d:tbcp
d:tbcl
d:tbclg
d:tbhg
d:tbfg
d:tbr
d:tbrg
d:tbc
d:rb
d:rbb
d:rbbg
d:rbt
d:rbtg
v
v:v
v:h
v:c
ov
ov:v
ov:h
ov:s
ov:a
ovx
ovx:v
ovx:h
ovx:s
ovx:a
ovy
ovy:v
ovy:h
ovy:s
ovy:a
ovs
ovs:a
ovs:s
ovs:p
ovs:m
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
c
op
cn, ct
ct:n
ct:oq
ct:noq
ct:cq
ct:ncq
ct:a
ct:c
ct:cs
q
q:n
q:ru
q:en
coi
cor
Color
Generated content
Outline
<dialog> </dialog>
Alias of strong
<strong> </strong>
Alias of progress
<progress> </progress>
Alias of datagrid
<datagrid> </datagrid>
Alias of datalist
<datalist> </datalist>
Alias of keygen
<keygen />
Alias of output
<output> </output>
Alias of details
<details> </details>
Alias of command
<command />
Alias of ol>li
<ol>
<li> </li>
</ol>
Alias of ul>li
<ul>
<li> </li>
</ul>
Alias of dl>dt+dd
<dl>
<dt> </dt>
<dd> </dd>
</dl>
display:table-caption;
display:table-column;
display:table-column-group;
display:table-header-group;
display:table-footer-group;
display:table-row;
display:table-row-group;
display:table-cell;
display:ruby;
display:ruby-base;
display:ruby-base-group;
display:ruby-text;
display:ruby-text-group;
visibility: ;
visibility:visible;
visibility:hidden;
visibility:collapse;
overflow: ;
overflow:visible;
overflow:hidden;
overflow:scroll;
overflow:auto;
overflow-x: ;
overflow-x:visible;
overflow-x:hidden;
overflow-x:scroll;
overflow-x:auto;
overflow-y: ;
overflow-y:visible;
overflow-y:hidden;
overflow-y:scroll;
overflow-y:auto;
overflow-style: ;
overflow-style:auto;
overflow-style:scrollbar;
overflow-style:panner;
overflow-style:move;

Cheat Sheet
ovs:mq
zoo
cp
cp:a
cp:r
rz
rz:n
rz:b
rz:h
rz:v
cur
cur:a
cur:d
cur:c
cur:ha
cur:he
cur:m
cur:p
cur:t
m
m:a
mt
mt:a
mr
mr:a
mb
mb:a
ml
ml:a
p
pt
pr
pb
pl
o
o:n
oo
ow
os
oc
oc:i
tbl
tbl:a
tbl:f
cps
cps:t
cps:b
ec
ec:s
ec:h
bd
bd+
bd:n
bdbk
bdbk:c
bdcl
bdcl:c
bdcl:s
bdc
bdi
bdi:n
bdti
bdti:n
bdri
bdri:n
bdbi
bdbi:n
bdli
Margin & Padding
Box Sizing
Tables
Border
Alias of map>area
<map name=" ">
<area shape=" " coords=" " href=" " alt=" " />
</map>
Alias of table>tr>td
<table>
<tr>
<td> </td>
</tr>
</table>
Alias of colgroup>col
<colgroup>
<col />
</colgroup>
Alias of tr>td
<tr>
<td> </td>
</tr>
Alias of select>option
<select name=" " id=" ">
</select>
Alias of optgroup>option
<optgroup>
</optgroup>




${child}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
overflow-style:marquee;
zoom:1;
clip: ;
clip:auto;
clip:rect( );
resize: ;
resize:none;
resize:both;
resize:horizontal;
resize:vertical;
cursor: ;
cursor:auto;
cursor:default;
cursor:crosshair;
cursor:hand;
cursor:help;
cursor:move;
cursor:pointer;
cursor:text;
margin: ;
margin:auto;
margin-top: ;
margin-top:auto;
margin-right: ;
margin-right:auto;
margin-bottom: ;
margin-bottom:auto;
margin-left: ;
margin-left:auto;
padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

Cheat Sheet
bxz
bxz:cb
bxz:bb
bxsh
bxsh:n
w
w:a
h
h:a
maw
maw:n
mah
mah:n
miw
mih
f
f+
fw
fw:n
fw:b
fw:br
fw:lr
fs
fs:n
fs:i
fs:o
fv
fv:n
fv:sc
fz
fza
fza:n
ff
ff:s
ff:ss
bdli:n
bdci
bdci:n
bdci:c
bdtli
bdtli:n
bdtli:c
bdtri
bdtri:n
bdtri:c
bdbri
bdbri:n
bdbri:c
bdbli
bdbli:n
bdbli:c
bdf
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
bds:dtds
bds:dtdtds
bds:w
bds:g
Font
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="${lang}">
<head>
content="text/html;charset=${charset}">
</head>
<body>
${child}
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
content="text/html;charset=${charset}">
</head>
<body>
${child}
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="${lang}">
<head>
content="text/html;charset=${charset}" />
<title></title>
</head>
<body>
${child}
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
xml:lang="${lang}">
<head>
</head>
<body>
${child}
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
box-sizing: ;
box-sizing:content-box;
box-sizing:border-box;
box-shadow: hoff voff radius
color ;
box-shadow:none;
width: ;
width:auto;
height: ;
height:auto;
max-width: ;
max-width:none;
max-height: ;
max-height:none;
min-width: ;
min-height: ;
font: ;
font: 1em Arial,sans-serif ;
font-weight: ;
font-weight:normal;
font-weight:bold;
font-weight:bolder;
font-weight:lighter;
font-style: ;
font-style:normal;
font-style:italic;
font-style:oblique;
font-variant: ;
font-variant:normal;
font-variant:small-caps;
font-size: ;
font-size-adjust: ;
font-size-adjust:none;
font-family: ;
font-family:serif;
font-family:sans-serif;

Cheat Sheet
ff:c
ff:f
ff:m
fef
fef:n
fef:eg
fef:eb
fef:o
fem
femp
femp:b
femp:a
fems
fems:n
fems:ac
fems:dt
fems:c
fems:ds
fsm
fsm:a
fsm:n
fsm:aw
fst
fst:n
fst:uc
fst:ec
fst:c
fst:sc
fst:se
fst:e
fst:ee
fst:ue
va
va:sup
va:t
va:tt
bds:r
bds:i
bds:o
bdw
bdt, bt
bdt+
bdt:n
bdtw
bdts
bdts:n
bdtc
bdr, br
bdr+
bdr:n
bdrw
bdrs:n
bdrc
bdb, bb
bdb+
bdb:n
bdbw
bdbs
bdbs:n
bdbc
bdl, bl
bdl+
bdl:n
bdlw
bdls
bdls:n
bdlc
bdrs
bdtrrs
bdtlrs
bdbrrs
bdblrs
Text
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
xml:lang="${lang}">
<head>
</head>
<body>
${child}
</body>
</html>
<!doctype html>
<head>
<meta charset="${charset}">
</head>
<body>
${child}
</body>
</html>
font-family:cursive;
font-family:fantasy;
font-family:monospace;
font-effect: ;
font-effect:none;
font-effect:engrave;
font-effect:emboss;
font-effect:outline;
font-emphasize: ;
font-emphasize-position: ;
font-emphasize-position:before;
font-emphasize-position:after;
font-emphasize-style: ;
font-emphasize-style:none;
font-emphasize-style:accent;
font-emphasize-style:dot;
font-emphasize-style:circle;
font-emphasize-style:disc;
font-smooth: ;
font-smooth:auto;
font-smooth:never;
font-smooth:always;
font-stretch: ;
font-stretch:normal;
font-stretch:ultra-condensed;
font-stretch:extra-condensed;
font-stretch:condensed;
font-stretch:semi-condensed;
font-stretch:semi-expanded;
font-stretch:expanded;
font-stretch:extra-expanded;
font-stretch:ultra-expanded;
vertical-align: ;
vertical-align:super;
vertical-align:top;
vertical-align:text-top;

Cheat Sheet
va:m
va:bl
va:b
va:tb
va:sub
ta
ta:l
ta:c
ta:r
tal
tal:a
tal:l
tal:c
tal:r
td
td:n
td:u
td:o
td:l
te
te:n
te:ac
te:dt
te:c
te:ds
te:b
te:a
th
th:a
th:f
th:t
th:m
ti
ti:-
tj
tj:a
lis
lis:n
lisp
lisp:i
lisp:o
list
list:n
list:d
list:c
list:s
list:dc
list:dclz
list:lr
list:ur
lisi
lisi:n
pgbb
pgbb:au
pgbb:al
pgbb:l
pgbb:r
pgbi
pgbi:au
pgbi:av
pgba
pgba:au
pgba:al
pgba:l
pgba:r
orp
wid
!
@f
Lists
Print
Others
vertical-align:middle;
vertical-align:baseline;
vertical-align:bottom;
vertical-align:text-bottom;
vertical-align:sub;
text-align: ;
text-align:left;
text-align:center;
text-align:right;
text-align-last: ;
text-align-last:auto;
text-align-last:left;
text-align-last:center;
text-align-last:right;
text-decoration: ;
text-decoration:none;
text-decoration:underline;
text-decoration:overline;
text-decoration:line-through;
text-emphasis: ;
text-emphasis:none;
text-emphasis:accent;
text-emphasis:dot;
text-emphasis:circle;
text-emphasis:disc;
text-emphasis:before;
text-emphasis:after;
text-height: ;
text-height:auto;
text-height:font-size;
text-height:text-size;
text-height:max-size;
text-indent: ;
text-indent:-9999px;
text-justify: ;
text-justify:auto;

Cheat Sheet
tj:iw
tj:ii
tj:ic
tj:d
tj:k
tj:t
to
to+
to:n
tr
tr:n
tt
tt:n
tt:c
tt:u
tt:l
tw
tw:n
tw:no
tw:u
tw:s
tsh
tsh+
tsh:n
lh
lts
whs
whs:n
whs:p
whs:nw
whs:pw
whs:pl
whsc
whsc:n
whsc:k
whsc:l
@f+
@i
@m
bg:ie
cm
op:ie
op:ms
trf
trf:r
trf:sc
trf:scx
trf:scy
trf:skx
trf:sky
trf:t
trf:tx
trf:ty
trs
trsde
trsdu
trsp
trstf
text-justify:inter-word;
text-justify:inter-ideograph;
text-justify:inter-cluster;
text-justify:distribute;
text-justify:kashida;
text-justify:tibetan;
text-outline: ;
text-outline: 0 0 #000 ;
text-outline:none;
text-replace: ;
text-replace:none;
text-transform: ;
text-transform:none;
text-transform:capitalize;
text-transform:uppercase;
text-transform:lowercase;
text-wrap: ;
text-wrap:normal;
text-wrap:none;
text-wrap:unrestricted;
text-wrap:suppress;
text-shadow: hoff voff blur
#000 ;
text-shadow: 0 0 0 #000 ;
text-shadow:none;
line-height: ;
letter-spacing: ;
white-space: ;
white-space:normal;
white-space:pre;
white-space:nowrap;
white-space:pre-wrap;
white-space:pre-line;
white-space-collapse: ;
white-space-collapse:normal;
white-space-collapse:keep-all;
white-space-collapse:loose;
white-space-collapse:break-strict;

Cheat Sheet
XSL
tm
tmatch
tn
tname
call
ap
api
imp
inc
ch
xsl:when
wh
ot
if
par
pare
var
elem
attr
attrs
cp
co
val
each
for
tex
com
msg
fall
num
nam
pres
strip
proc
sort
white-space-collapse:break-all;
word-break: ;
word-break:normal;
word-break:keep-all;
word-break:loose;
word-break:break-strict;
word-break:break-all;
word-spacing: ;
word-wrap: ;
word-wrap:normal;
word-wrap:none;
word-wrap:unrestricted;
word-wrap:suppress;
background: ;
background: #fff url( ) 0 0
no-repeat ;
background:none;
background-color:# fff ;
background-image:url( );
background-image:none;
background-repeat: ;
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-attachment: ;
background-attachment:fixed;
background-attachment:scroll;
background-position: 0 0 ;
background-position-x: ;
background-position-y: ;
background-break: ;
background-break:bounding-box;
background-break:each-box;
background-break:continuous;
background-clip: ;
background-clip:border-box;
<xsl:template match=" " mode=" "> </xsl:template>
Alias of tm
<xsl:template match=" " mode=" "> </xsl:template>
<xsl:template name=" "> </xsl:template>
Alias of tn
<xsl:template name=" "> </xsl:template>
<xsl:call-template name=" " />
<xsl:apply-templates select=" " mode=" " />
<xsl:apply-imports />
<xsl:import href=" " />
<xsl:include href=" " />
<xsl:choose> </xsl:choose>
<xsl:when test=" "> </xsl:when>
Alias of xsl:when
<xsl:when test=" "> </xsl:when>
<xsl:otherwise> </xsl:otherwise>
<xsl:if test=" "> </xsl:if>
<xsl:param name=" "> </xsl:param>
<xsl:param name=" " select=" " />
<xsl:variable name=" "> </xsl:variable>

Cheat Sheet
vare
wp
key
choose+
background-clip:padding-box;
background-clip:content-box;
background-clip:no-clip;
background-origin: ;
background-origin:padding-box;
background-origin:border-box;
background-origin:content-box;
background-size: ;
<xsl:variable name=" " select=" " />
<xsl:with-param name=" " select=" " />
<xsl:key name=" " match=" " use=" " />
<xsl:element name=" "> </xsl:element>

Emmet cheat-sheet

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Emmet cheat-sheet

Similar to Emmet cheat-sheet (20)

Recently uploaded

Recently uploaded (20)

Emmet cheat-sheet