Emmet Simplified 😍

rishiabee profile image Rishi ・1 min read

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow

Type Syntax Example1
Child > nav>ul>li
Sibling + div+p+bq
Climb-up ^ div+div>p>span+em^^bq
Multiplication * ul>li*5
Grouping () (div>dl>(dt+dd)*3)+footer>p
Item numbering $ ul>li.item$*5>{$}
Item numbering h$[title=item$]{Header $$$}*6
Id # div#title
Class . div.title
Custom attributes [] p[title="Hello Rishi Abee"]
Text {} a{Click me}
Lorem (random length) >lorem p>lorem
Lorem (defined length) >lorem10 p>lorem10

HTML boilerplate

! β†’
link β†’

Alt Text

Usage example - Header

nav.navbar.navbar-expand-md.navbar-dark.fixed-top.bg-dark>a.navbar-brand>{Brown Bag Session}^^main>((div.jumbotron>div.container>h1.display-3>{Hello Rishi Abee})+div.container) β†’

Usage example - Body

(h${Header $}*6)+(bq.blockquote3>p.mb-0>lorem10+footer.blockquote-footer>lorem2) β†’

Usage example - Footer

hr+footer.container>p>{UnLicensed} β†’

  1. Emmet cheatsheet ↩

Posted on by:

rishiabee profile



Computer Science is evolving so fast... I'm eternally a student. Here're some of my notes.


Editor guide