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
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 ↩
Top comments (0)