Emmet Guide
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 1
Emmet is a markup language for expanding CSS rules
into HTML
2 Comments for this cheatsheet. Write yours!
Search 380+ cheatsheets
Over 380 curated cheatsheets, by
developers for developers.
Devhints home
Other Markup cheatsheets
Markdown cheatsheet
Textile cheatsheet Haml cheatsheet
Kramdown cheatsheet Rdoc cheatsheet
ReStructuredText cheatsheet
Top cheatsheets
Elixir cheatsheet ES2015+ cheatsheet
React.js cheatsheet
Vimdiff cheatsheet Vim cheatsheet
Vim scripting cheatsheet
Edit
Emmet cheatsheet
Proudly sponsored by
Airbrake.io Full-stack error tracking & analytics
for Python developers. Try it Free!
!
ethical ads via CodeFund
—
—
Child: >
nav>ul>li
Expands to
<nav>
<ul>
<li></li>
</ul>
</nav>
Sibling: +
section>p+p+p
Expands to
<section>
<p></p>
<p></p>
<p></p>
</section>
Climb Up: ^
section>header>h1^footer
Expands to
<section>
<header>
<h1></h1>
</header>
<footer></footer>
</section>
Grouping: ()
section>(header>nav>ul>li)+footer>p
Expands to
<section>
<header>
<nav>
<ul>
<li></li>
</ul>
</nav>
</header>
<footer>
<p></p>
</footer>
</section>
Multiplication: *
ul>li*3
Expands to
<ul>
<li></li>
<li></li>
<li></li>
</ul>
IDs and Classes: .
ul.menu>li.menu__item+li#id_item+li.menu__item#id_2
Expands to
<ul>
<li class="menu__item"></li>
<li id="id_item"></li>
<li class="menu__item" id="id_2"></li>
</ul>
Numbering: $
ul>li.item$*3
ul>li.item$$*3
ul>li.item$@-*3
ul>li.item$@3*5
Expands to
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
Attributes: []
input[type="text"]
div[data-attr="test"]
Expands to
<input type="text" />
<div data-attr="test"></div>
Text: {}
p{Lorem ipsum}
Expands to
<p>Lorem ipsum</p>
Implicit tags
.default-block
em>.default-inline
ul>.default-list
table>.default-table-row>.default-table-column
Expands to
<div class="default-block"></div>
<em><span class="default-inline"></span></em>
<ul>
<li class="default-list"></li>
</ul>
<table>
<tr class="default-table-row">
<td class="default-table-column"></td>
</tr>
</table>
12/25/18, 6)46 PM
Page 1 of 1
