Emmet Simplified 😍

#emmet #html #simple #learn

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

Type	Syntax	Example¹
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

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} →

Emmet cheatsheet ↩

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More