Emmet: Code Less, Build More
Published
•11 min readEmmet as a shorthand language for web developers. It’s a free plugin—built into most modern code editors like VS Code—that allows you to type abbreviated "CSS-like" snippets and instantly transform them into full blocks of HTML or CSS code.
Guide
1. The Core Syntax Operators
These symbols define the relationship between elements (nesting, siblings, grouping).
| Symbol | Name | Function | Example Input | Expanded Output (Simplified) |
> | Child | Nests elements inside. | div>ul>li | <div><ul><li></li></ul></div> |
+ | Sibling | Places elements next to each other. | h1+p | <h1></h1><p></p> |
^ | Climb Up | Moves up one level in the hierarchy. | div>p>span^h1 | <div><p><span></span></p><h1></h1></div> |
* | Multiplication | Repeats an element $N$ times. | li*3 | <li></li><li></li><li></li> |
() | Grouping | Groups elements for complex nesting. | (header>ul)+footer | <header><ul></ul></header><footer></footer> |
2. HTML Attributes & Content
How to add classes, IDs, text, and custom attributes without typing standard HTML.
| Feature | Syntax | Example Input | Expanded Output |
| ID | # | div#container | <div id="container"></div> |
| Class | . | p.text-red | <p class="text-red"></p> |
| Custom Attr | [] | td[title="Hello" colspan=3] | <td title="Hello" colspan="3"></td> |
| Text | {} | a{Click Me} | <a href="">Click Me</a> |
| Implicit Tag | (None) | .class (inside a ul) | <li class="class"></li> |
3. Lists, Iteration & Numbering
This is the most powerful feature for generating repetitive structures (menus, lists, grids).
| Feature | Syntax | Description | Example Input |
| Numbering | $ | Adds the current number (1, 2, 3). | li.item$*3 > class="item1", item2, item3 |
| Pad Zeros | $$ | Adds zero-padding (01, 02). | li.item$$*3 > class="item01", item02 |
| Reverse | @- | Counts backwards. | li.item$@-*3 > item3, item2, item1 |
| Start At | @N | Starts counting from number $N$. | li.item$@10*3 > item10, item11, item12 |
| Text Numbering | {$} | Puts number inside text content. | a{Link $}*3 > Link 1, Link 2, Link 3 |
4. Special Emmet Syntax Filters
These are appended to the end of an abbreviation to change how the code is rendered.
| Filter | Syntax | Function |
| Comment | ` | c` |
| Escape | ` | e` |
| BEM | - | (Double dash inside class) Shortens BEM syntax. |
| BEM Mod | _ | (Underscore inside class) Shortens BEM modifier. |
5. Implicit Tag Names
If you type only a class or ID, Emmet guesses the tag based on the parent.
| Parent | Implicit Child Tag | Example | Output |
ul, ol | li | ul>.item | <ul><li class="item"></li></ul> |
table, tbody, thead, tfoot | tr | table>.row | <table><tr class="row"></tr></table> |
tr | td | tr>.cell | <tr><td class="cell"></td></tr> |
select, optgroup | option | select>.opt | <select><option class="opt"></option></select> |
map | area | map>.area | <map><area class="area"></map> |
head | meta | ||
svg | path |
6. HTML and CSS Boilerplates
1. HTML: Document Structure & Meta Tags
| Abbreviation | Expands To |
! / html:5 | <!DOCTYPE html><html lang="en"><head>...</head><body>...</body></html> |
html:4s | HTML 4.01 Strict boilerplate |
html:4t | HTML 4.01 Transitional boilerplate |
html:xt | XHTML 1.0 Transitional boilerplate |
html:xs | XHTML 1.0 Strict boilerplate |
meta:utf | <meta http-equiv="Content-Type" content="text/html;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=7"> |
script:src | <script src=""></script> |
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:touch | <link rel="apple-touch-icon" href="favicon.png"> |
link:rss | <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml"> |
link:atom | <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml"> |
style | <style></style> |
2. HTML: Sectioning & Grouping
| Abbreviation | Expands To |
sect | <section></section> |
art | <article></article> |
hdr | <header></header> |
ftr | <footer></footer> |
adr | <address></address> |
nav | <nav></nav> |
main | <main></main> |
asd | <aside></aside> |
h1 ... h6 | <h1></h1> ... <h6></h6> |
hgroup | <hgroup></hgroup> |
div | <div></div> |
p | <p></p> |
bq | <blockquote></blockquote> |
fig | <figure></figure> |
figc | <figcaption></figcaption> |
hr | <hr> |
3. HTML: Lists & Tables
| Abbreviation | Expands To |
ul | <ul></ul> |
ol | <ol></ol> |
li | <li></li> |
dl | <dl></dl> |
dt | <dt></dt> |
dd | <dd></dd> |
table | <table></table> |
tr | <tr></tr> |
td | <td></td> |
th | <th></th> |
thead | <thead></thead> |
tbody | <tbody></tbody> |
tfoot | <tfoot></tfoot> |
colg | <colgroup></colgroup> |
col | <col> |
cap | <caption></caption> |
4. HTML: Forms & Input
| Abbreviation | Expands To |
form | <form action=""></form> |
form:get | <form action="" method="get"></form> |
form:post | <form action="" method="post"></form> |
label | <label for=""></label> |
fieldset | <fieldset></fieldset> |
leg | <legend></legend> |
inp | <input type="text"> |
input:t | <input type="text" name="" id=""> |
input:p | <input type="password" name="" id=""> |
input:h | <input type="hidden" name=""> |
input:c | <input type="checkbox" name="" id=""> |
input:r | <input type="radio" name="" id=""> |
input:s | <input type="submit" value=""> |
input:b | <input type="button" value=""> |
input:res | <input type="reset" value=""> |
input:f | <input type="file" name="" id=""> |
input:i | <input type="image" src="" alt=""> |
input:d | <input type="date" name="" id=""> |
input:dt | <input type="datetime" name="" id=""> |
input:dtl | <input type="datetime-local" name="" id=""> |
input:m | <input type="month" name="" id=""> |
input:wk | <input type="week" name="" id=""> |
input:time | <input type="time" name="" id=""> |
input:num | <input type="number" name="" id=""> |
input:color | <input type="color" name="" id=""> |
input:search | <input type="search" name="" id=""> |
input:email | <input type="email" name="" id=""> |
input:url | <input type="url" name="" id=""> |
input:tel | <input type="tel" name="" id=""> |
select | <select name="" id=""></select> |
opt | <option value=""></option> |
optg | <optgroup label=""></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 disabled="disabled"></button> |
5. HTML: Inline & Media
| Abbreviation | Expands To |
a | <a href=""></a> |
a:link | <a href="http://"></a> |
a:mail | <a href="mailto:"></a> |
a:tel | <a href="tel:"></a> |
img | <img src="" alt=""> |
pic | <picture></picture> |
src | <source src="" type=""> |
ifr | <iframe src="" frameborder="0"></iframe> |
emb | <embed src="" type=""> |
obj | <object data="" type=""></object> |
vid | <video src=""></video> |
aud | <audio src=""></audio> |
map | <map name=""></map> |
area | <area shape="" coords="" href="" alt=""> |
span | <span></span> |
em | <em></em> |
strong | <strong></strong> |
q | <q></q> |
s | <s></s> |
small | <small></small> |
u | <u></u> |
mark | <mark></mark> |
bdi | <bdi></bdi> |
bdo | <bdo dir=""></bdo> |
6. CSS: Position & Layout
| Abbreviation | Property | Value |
pos | position | relative |
pos:s | position | static |
pos:a | position | absolute |
pos:r | position | relative |
pos:f | position | fixed |
t / r / b / l | top / right / bottom / left | auto |
z | z-index | |
fl | float | left |
fr | float | right |
fn | float | none |
cl | clear | both |
d | display | block |
dn | display | none |
dib | display | inline-block |
di | display | inline |
df | display | flex |
dg | display | grid |
dt | display | table |
v | visibility | hidden |
ov | overflow | hidden |
ov:a | overflow | auto |
ov:s | overflow | scroll |
ovx / ovy | overflow-x / overflow-y | hidden |
cp | clip | auto |
7. CSS: Flexbox & Grid
| Abbreviation | Property | Value |
fxd | flex-direction | |
fxd:r | flex-direction | row |
fxd:rr | flex-direction | row-reverse |
fxd:c | flex-direction | column |
fxd:cr | flex-direction | column-reverse |
fxw | flex-wrap | nowrap |
fxw:w | flex-wrap | wrap |
jc | justify-content | |
jcc | justify-content | center |
jcsb | justify-content | space-between |
jcsa | justify-content | space-around |
jcfe | justify-content | flex-end |
jcf | justify-content | flex-start |
ai | align-items | |
aic | align-items | center |
ais | align-items | stretch |
aib | align-items | baseline |
ac | align-content | |
as | align-self | |
fx | flex | |
ord | order | |
gta | grid-template-areas | |
gtc | grid-template-columns | |
gtr | grid-template-rows | |
ga | grid-area | |
gg | grid-gap |
8. CSS: Box Model (Margin/Padding/Size)
| Abbreviation | Property | Notes |
m | margin | m10 > margin: 10px; |
mt / mr / mb / ml | margin-top/right... | mt5 > margin-top: 5px; |
p | padding | p10 > padding: 10px; |
pt / pr / pb / pl | padding-top/right... | |
w | width | w100p > width: 100%; |
h | height | h100vh > height: 100vh; |
maw / miw | max-width / min-width | |
mah / mih | max-height / min-height | |
bxz | box-sizing | border-box |
bxz:cb | box-sizing | content-box |
9. CSS: Typography & Text
| Abbreviation | Property | Value / Note |
c | color | #000 |
fz | font-size | |
ff | font-family | |
fw | font-weight | |
fw:b | font-weight | bold |
ta | text-align | left |
tac | text-align | center |
tar | text-align | right |
taj | text-align | justify |
td | text-decoration | none |
td:u | text-decoration | underline |
tt | text-transform | uppercase |
tt:l | text-transform | lowercase |
tt:c | text-transform | capitalize |
lh | line-height | |
ls | letter-spacing | |
whs | white-space | |
whs:n | white-space | nowrap |
whs:p | white-space | pre |
wob | word-break | |
tow | text-overflow | ellipsis |
10. CSS: Background & Borders
| Abbreviation | Property | Value / Note |
bg | background | #000 |
bgc | background-color | #fff |
bgi | background-image | url() |
bgr | background-repeat | |
bgr:n | background-repeat | no-repeat |
bgp | background-position | 0 0 |
bgs | background-size | |
bgs:cv | background-size | cover |
bgs:ct | background-size | contain |
bd | border | 1px solid #000 |
bd+ | border | 1px solid #000 |
bd:n | border | none |
bdb | border-bottom | |
bdt | border-top | |
bdr | border-right | |
bdl | border-left | |
br | border-radius | |
bdcl | border-collapse | collapse |
11. CSS: Visual Effects
| Abbreviation | Property | Value |
op | opacity | |
bxsh | box-shadow | inset h v blur spread color |
tsh | text-shadow | h v blur color |
trf | transform | |
trs | transition | prop time func delay |
anim | animation | |
cur | cursor | pointer |
cur:a | cursor | auto |
us | user-select | none |