Emmet Simplified 😍

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 →
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

GIF

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 ↩