📖 Guide
Emmet — Complete Reference
Quick reference for Emmet abbreviations for lightning-fast HTML and CSS coding.
63 commands across 10 categories
HTML AbbreviationsCSS AbbreviationsNestingGroupingMultiplicationNumberingTextAttributesImplicit TagsCommon Shortcuts
HTML Abbreviations
| Command | Description |
|---|---|
! | HTML5 boilerplate (doctype, html, head, body) |
div | Expand to <div></div> |
a:link | <a href="http://"></a> |
a:mail | <a href="mailto:"></a> |
link:css | <link rel="stylesheet" href="style.css"> |
script:src | <script src=""></script> |
input:text | <input type="text" name="" id=""> |
btn | <button></button> |
CSS Abbreviations
| Command | Description |
|---|---|
m10 | margin: 10px; |
p10-20 | padding: 10px 20px; |
w100p | width: 100%; |
h50 | height: 50px; |
fz16 | font-size: 16px; |
fw700 | font-weight: 700; |
d:f | display: flex; |
jc:c | justify-content: center; |
ai:c | align-items: center; |
pos:r | position: relative; |
Nesting
| Command | Description |
|---|---|
div>p | Child: <div><p></p></div> |
div+p | Sibling: <div></div><p></p> |
div>p>span | Deep nesting: div → p → span |
div>p+p | Child then sibling: div with two p children |
ul>li>a | Nested list link: ul → li → a |
div>p^div | Climb up: p inside first div, then sibling div |
div>p^^section | Climb up twice |
Grouping
| Command | Description |
|---|---|
(header>nav)+main+footer | Group header with nested nav, then siblings |
div>(header>h1)+section | Group inside a parent |
(div>p)*2e.g. Creates 2 divs each with a p | Repeat a group |
ul>(li>a)*3 | List with 3 linked items |
(header>nav)+(main>section)+footer | Complex page skeleton |
Multiplication
| Command | Description |
|---|---|
li*5 | 5 list items |
ul>li*3 | Unordered list with 3 items |
div>p*4 | Div with 4 paragraphs |
table>tr*3>td*4 | 3-row, 4-column table |
.item*6 | 6 divs with class 'item' |
Numbering
| Command | Description |
|---|---|
li.item$*3 | item1, item2, item3 classes |
li.item$$*3 | item01, item02, item03 (zero-padded) |
h$.title$*3 | <h1 class='title1'>, <h2 class='title2'>, etc. |
li.item$@3*3 | Start numbering at 3: item3, item4, item5 |
li.item$@-*3 | Reverse: item3, item2, item1 |
Text
| Command | Description |
|---|---|
p{Hello World} | <p>Hello World</p> |
a{Click me} | <a href=''>Click me</a> |
p>{Text }+em{here} | <p>Text <em>here</em></p> |
ul>li{Item $}*3 | Item 1, Item 2, Item 3 |
h1{Title}+p{Body text} | Heading followed by paragraph with text |
Attributes
| Command | Description |
|---|---|
#main | <div id="main"></div> |
.container | <div class="container"></div> |
.foo.bar | <div class="foo bar"></div> |
p.intro#first | <p class="intro" id="first"></p> |
td[colspan="2"] | <td colspan="2"></td> |
a[href="#" title="Link"] | Element with multiple attributes |
input[type=email][required] | Boolean and value attributes |
Common Shortcuts
| Command | Description |
|---|---|
nav>ul>li*5>a | Navigation bar skeleton |
form>input:text+input:email+btn | Simple form |
.container>.row>.col*3 | Grid layout structure |
header+main+footer | Page layout skeleton |
dl>(dt+dd)*3 | Definition list with 3 term-description pairs |
figure>img+figcaption | Figure with image and caption |
📖 Free, searchable command reference. Bookmark this page for quick access.