A Quick Reference for the Emmet Plugin
Tags: emmet, plugin, efficiency, workflow
Published: 2020-04-12 21:47:42

Writing the same html syntax over and over is not only mind-numbing, but an unnecessary drain on your productivity. In the case of starting an html document, the Emmet plugin allows you to accomplish in 6 characters what would manually require 171. The examples below introduce you to ways you'll be able to harness this powerful tool for yourself.

>The Emmet plugin must be downloaded in your IDE for the emmet syntax to render into html. Documentation and download information can be found on [Emmet.io](https://emmet.io).

###STARTING AN HTML DOCUMENT FROM SCRATCH

Emmet Syntax:
```
html:5
```

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
```

###CREATING AN ELEMENT WITH A CLASS

Emmet Syntax:
```
div.divName
```

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
```html
<div class="divName"></div>
```

###CREATING AN ELEMENT WITH AN ID
Emmet Syntax
```
div#divName

```

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
```html
<div id="divName"></div>
```

###CREATING AN ELEMENT WITH A CLASS AND ID
Emmet Syntax:
```
div.divName#divIdName
```

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
```html
<div class="divName" id="divIdName"></div>
```


###CREATING A LIST WITH MULTIPLE CHILD ELEMENTS

Emmet Syntax:
```
ul>li*5
```

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
```html
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
```

###ADDING A UNIQUE CLASS NAME FOR EACH CHILD ELEMENT

Emmet Syntax:
```
ul.list>li.item$*4
```

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
```html
<ul class="list">
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
</ul> 
```

###ADDING TEXT INTO AN ELEMENT
Emmet Syntax:
```
p.pName{Hello World!}
```

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
```html
<p class="pName">Hello World!</p>
```

###ADDING MULTIPLE UNRELATED ELEMENTS
Emmet Syntax:
```
head+body+footer
```

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
```html
<head></head>
<body>
  
</body>
<footer></footer>
```


###GROUPING USING PARENTHESES
Emmet Syntax:
```
head+(body>div.section$*3>p*2)+footer
```

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:
```html
<head></head>
<body>
  <div class="section1">
    <p></p>
    <p></p>
  </div>
  <div class="section2">
    <p></p>
    <p></p>
  </div>
  <div class="section3">
    <p></p>
    <p></p>
  </div>
</body>
<footer></footer>
```

##Download the [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/) to learn more!