How to Use This Cheat Sheet
This reference lists every practical Emmet abbreviation for HTML and CSS. Emmet is built into VS Code and most modern editors — type an abbreviation and press Tab to expand it. For a deep-dive into how operators work, see our complete Emmet guide. This page is your bookmark-worthy quick-reference for every expansion.
Tip: In VS Code, set "emmet.triggerExpansionOnTab": true in settings to ensure Tab always expands Emmet abbreviations.
HTML Abbreviations
Document Boilerplate
! → Full HTML5 boilerplate (doctype, html, head, body)
html:5 → Same as above — HTML5 skeleton
html:4t → HTML 4.01 Transitional doctype
html:4s → HTML 4.01 Strict doctype
html:xt → XHTML 1.0 Transitional
html:xs → XHTML 1.0 StrictDocument Structure Tags
div, p, span, section, article, aside, header, footer, main, nav
h1 through h6
ul>li, ol>li
dl>dt+dd
table>tr>td
figure>figcaption
details>summaryText & Formatting HTML Abbreviations
a → <a href=""></a>
a:link → <a href="http://"></a>
a:mail → <a href="mailto:"></a>
a:tel → <a href="tel:+"></a>
abbr → <abbr title=""></abbr>
acronym → <acronym title=""></acronym>
blockquote → <blockquote cite=""></blockquote>
br → <br>
cite → <cite></cite>
code → <code></code>
del → <del datetime=""></del>
dfn → <dfn></dfn>
em → <em></em>
hr → <hr>
ins → <ins datetime=""></ins>
kbd → <kbd></kbd>
mark → <mark></mark>
pre → <pre></pre>
q → <q cite=""></q>
s → <s></s>
samp → <samp></samp>
small → <small></small>
strong → <strong></strong>
sub → <sub></sub>
sup → <sup></sup>
time → <time datetime=""></time>
var → <var></var>
wbr → <wbr>Form HTML Abbreviations
form → <form action=""></form>
form:get → <form action="" method="get"></form>
form:post → <form action="" method="post"></form>
input → <input type="text">
input:text → <input type="text" name="" id="">
input:email → <input type="email" name="" id="">
input:password → <input type="password" name="" id="">
input:tel → <input type="tel" name="" id="">
input:url → <input type="url" name="" id="">
input:number → <input type="number" name="" id="">
input:date → <input type="date" name="" id="">
input:datetime-local → <input type="datetime-local" name="" id="">
input:time → <input type="time" name="" id="">
input:range → <input type="range" name="" id="" min="" max="">
input:color → <input type="color" name="" id="">
input:checkbox → <input type="checkbox" name="" id="">
input:radio → <input type="radio" name="" id="">
input:file → <input type="file" name="" id="">
input:submit → <input type="submit" value="">
input:reset → <input type="reset" value="">
input:hidden → <input type="hidden" name="">
input:image → <input type="image" src="" alt="">
input:button → <input type="button" value="">
input:search → <input type="search" name="" id="">
select → <select name="" id=""></select>
select:disabled → <select name="" id="" disabled=""></select>
option → <option value=""></option>
optgroup → <optgroup></optgroup>
textarea → <textarea name="" id="" cols="30" rows="10"></textarea>
btn → <button></button>
btn:s → <button type="submit"></button>
btn:r → <button type="reset"></button>
btn:d → <button type="button" disabled=""></button>
label → <label for=""></label>
fieldset → <fieldset></fieldset>
legend → <legend></legend>
datalist → <datalist id=""></datalist>
meter → <meter value=""></meter>
progress → <progress value="" max=""></progress>
output → <output name=""></output>Media & Embed HTML Abbreviations
img → <img src="" alt="">
img:s → <img src="" alt="" srcset="">
picture → <picture></picture>
source → <source>
audio → <audio src=""></audio>
audio:all → full audio with controls, loop, autoplay attributes
video → <video src=""></video>
video:all → full video with controls, loop, autoplay, poster
track → <track kind="" src="" srclang="" label="">
embed → <embed src="" type="">
object → <object data="" type=""></object>
param → <param name="" value="">
canvas → <canvas id="" width="" height=""></canvas>
svg → <svg xmlns="http://www.w3.org/2000/svg"></svg>
iframe → <iframe src="" frameborder="0"></iframe>
map → <map name=""></map>
area → <area shape="" coords="" href="" alt="">Head / Metadata Abbreviations
link → <link rel="stylesheet" href="">
link:css → <link rel="stylesheet" href="style.css">
link:print → <link rel="stylesheet" href="print.css" media="print">
link:favicon → <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
link:apple → <link rel="apple-touch-icon" href="apple-touch-icon.png">
meta → <meta>
meta:charset → <meta charset="UTF-8">
meta:vp → <meta name="viewport" content="width=device-width, initial-scale=1.0">
meta:compat → <meta http-equiv="X-UA-Compatible" content="ie=edge">
meta:desc → <meta name="description" content="">
meta:kw → <meta name="keywords" content="">
meta:redirect → <meta http-equiv="refresh" content="0; url=http://">
script → <script></script>
script:src → <script src=""></script>
style → <style></style>
title → <title></title>
base → <base href="">
noscript → <noscript></noscript>Table Abbreviations
table → <table></table>
table>tr>td → Basic table row with cell
thead → <thead></thead>
tbody → <tbody></tbody>
tfoot → <tfoot></tfoot>
tr → <tr></tr>
td → <td></td>
th → <th></th>
caption → <caption></caption>
col → <col>
colgroup → <colgroup></colgroup>
/* Generate a 3-column table with headers: */
table>(thead>tr>th*3)+(tbody>tr*3>td*3)Lorem Ipsum Text Generation
lorem → Full lorem ipsum paragraph (~30 words)
lorem5 → 5 words of lorem ipsum
lorem20 → 20 words of lorem ipsum
p*3>lorem → 3 paragraphs of lorem ipsum
ul>li*5>lorem4 → 5 list items each with 4 wordsCSS Abbreviations Cheat Sheet
In CSS files, Emmet uses abbreviated property names. These work in .css, .scss, and .less files. Use the CSS Formatter if your output needs cleanup.
Display & Layout
d:n → display: none;
d:b → display: block;
d:i → display: inline;
d:ib → display: inline-block;
d:f → display: flex;
d:if → display: inline-flex;
d:g → display: grid;
d:t → display: table;
d:tc → display: table-cell;
d:li → display: list-item;
v:h → visibility: hidden;
v:v → visibility: visible;
ov:h → overflow: hidden;
ov:v → overflow: visible;
ov:a → overflow: auto;
ov:s → overflow: scroll;Positioning
pos:s → position: static;
pos:r → position: relative;
pos:a → position: absolute;
pos:f → position: fixed;
pos:st → position: sticky;
t:a → top: auto;
t10 → top: 10px;
r10 → right: 10px;
b10 → bottom: 10px;
l10 → left: 10px;
z1 → z-index: 1;
z10 → z-index: 10;Box Model
m10 → margin: 10px;
m10-20 → margin: 10px 20px;
mt10 → margin-top: 10px;
mr10 → margin-right: 10px;
mb10 → margin-bottom: 10px;
ml10 → margin-left: 10px;
mx10 (→ margin-left + margin-right — not standard, use ml+mr)
m:a → margin: auto;
p10 → padding: 10px;
pt10 → padding-top: 10px;
pr10 → padding-right: 10px;
pb10 → padding-bottom: 10px;
pl10 → padding-left: 10px;
w100 → width: 100px;
w100p → width: 100%;
h50 → height: 50px;
maw500 → max-width: 500px;
mah300 → max-height: 300px;
miw200 → min-width: 200px;
mih100 → min-height: 100px;
bxz:bb → box-sizing: border-box;
bxz:cb → box-sizing: content-box;Typography
fz16 → font-size: 16px;
fz1em → font-size: 1em;
fz1rem → font-size: 1rem;
fw400 → font-weight: 400;
fw700 → font-weight: 700;
fst:i → font-style: italic;
fst:n → font-style: normal;
fv:sc → font-variant: small-caps;
ff:s → font-family: serif;
ff:ss → font-family: sans-serif;
ff:m → font-family: monospace;
lh1.5 → line-height: 1.5;
lh2em → line-height: 2em;
ls2 → letter-spacing: 2px;
ws:n → white-space: nowrap;
ws:p → white-space: pre;
ta:l → text-align: left;
ta:c → text-align: center;
ta:r → text-align: right;
ta:j → text-align: justify;
td:n → text-decoration: none;
td:u → text-decoration: underline;
td:lt → text-decoration: line-through;
tt:u → text-transform: uppercase;
tt:l → text-transform: lowercase;
tt:c → text-transform: capitalize;
c#333 → color: #333;
c:r → color: rgb(0,0,0);Background
bg → background: #000;
bgc#fff → background-color: #fff;
bgi:n → background-image: none;
bgi:u → background-image: url();
bgp → background-position: 0 0;
bgr:n → background-repeat: no-repeat;
bgr:r → background-repeat: repeat;
bgr:rx → background-repeat: repeat-x;
bgr:ry → background-repeat: repeat-y;
bgs:cv → background-size: cover;
bgs:ct → background-size: contain;
bga:f → background-attachment: fixed;
bga:s → background-attachment: scroll;Border
bd+ → border: 1px solid #000;
bdt+ → border-top: 1px solid #000;
bdr+ → border-right: 1px solid #000;
bdb+ → border-bottom: 1px solid #000;
bdl+ → border-left: 1px solid #000;
bd:n → border: none;
bdrs5 → border-radius: 5px;
bdrs50p → border-radius: 50%;
bdrst10 → border-top-left-radius: 10px; (+ top-right)
bdc#ccc → border-color: #ccc;
bds:s → border-style: solid;
bds:d → border-style: dashed;
bds:dt → border-style: dotted;
bdw2 → border-width: 2px;Flexbox CSS Abbreviations
fx → flex: ;
fxd:r → flex-direction: row;
fxd:c → flex-direction: column;
fxd:rr → flex-direction: row-reverse;
fxd:cr → flex-direction: column-reverse;
fxw:w → flex-wrap: wrap;
fxw:n → flex-wrap: nowrap;
ai:c → align-items: center;
ai:fs → align-items: flex-start;
ai:fe → align-items: flex-end;
ai:s → align-items: stretch;
jc:c → justify-content: center;
jc:fs → justify-content: flex-start;
jc:fe → justify-content: flex-end;
jc:sb → justify-content: space-between;
jc:sa → justify-content: space-around;
jc:se → justify-content: space-evenly;
ac:c → align-content: center;
fxg1 → flex-grow: 1;
fxsh0 → flex-shrink: 0;Animation & Transition
anim:a → animation: ;
trs → transition: all 0s ease 0s;
trsd → transition-duration: ;
trsde → transition-delay: ;
trsp → transition-property: ;
trstf → transition-timing-function: ;
trsf:r → transform: rotate(0deg);
trsf:sc → transform: scale(1);
trsf:t → transform: translate(0, 0);
trsf:skx → transform: skewX(0deg);Miscellaneous CSS
op0 → opacity: 0;
op.5 → opacity: .5;
op1 → opacity: 1;
cr:p → cursor: pointer;
cr:d → cursor: default;
cr:t → cursor: text;
pe:n → pointer-events: none;
us:n → user-select: none;
ol:n → outline: none;
rsz:n → resize: none;
fl:l → float: left;
fl:r → float: right;
fl:n → float: none;
cl:b → clear: both;
cl:l → clear: left;
cnt → content: ;
cnt:oq → content: open-quote;
q:b → quotes: ;Bootstrap Emmet Patterns
While Emmet doesn't know about Bootstrap classes natively, you can type Bootstrap classes directly as Emmet class abbreviations:
div.container>div.row>div.col-md-4*3
/* Expands to: */
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>Practical Multi-Operator Examples
/* Responsive card grid */
.grid>.card*6>.card__image+(.card__body>h3{Title $}+p>lorem10)
/* Full navigation */
header>nav.navbar>.brand{Logo}+ul.nav>li.nav__item*5>a.nav__link[href="#"]{Item $}
/* Contact form */
form.form>
(div.form-group>label{Name}+input:text[name="name"])+
(div.form-group>label{Email}+input:email[name="email"])+
(div.form-group>label{Message}+textarea[name="message"])+
button.btn.btn-primary[type="submit"]{Send Message}Keep this cheat sheet bookmarked — it covers virtually every Emmet abbreviation you'll ever need. Test your Emmet expansions live in the Live HTML/CSS Editor and use the HTML Formatter to review the generated output.