Emmet Reference
Fast HTML and CSS coding with Emmet abbreviations and shortcuts
HTML Basics
Nesting & Grouping
div>ul>li # nested elements
div+p+span # sibling elements
div>ul>li*3 # multiply (3 items)
div>(header>nav)+main # grouping with ()
ul>li*5 # 5 list items
div^p # climb up
Attributes & Text
div.container #
div#header #
a[href="#" target] # custom attributes
p{Click me} # Click me
ul>li.item$*3 # item1, item2, item3
h$[title=item$]{Header $}*3 # numbered items
CSS Abbreviations
m10 # margin: 10px
p20 # padding: 20px
w100p # width: 100%
h50vh # height: 50vh
fz16 # font-size: 16px
df # display: flex
jcc # justify-content: center
Advanced Patterns
table+ # full table structure
ul+ # ul with one li
form:post # form with POST method
input:text # text input
input:email # email input
btn #
.row>.col-md-6*2 # Bootstrap grid