A Quick Reference for the Emmet Plugin

Nathan B Hankes - Apr 12 '20 - - Dev Community

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.

STARTING AN HTML DOCUMENT FROM SCRATCH

Emmet Syntax:

html:5
Enter fullscreen mode Exit fullscreen mode

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:

<!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>
Enter fullscreen mode Exit fullscreen mode

CREATING AN ELEMENT WITH A CLASS

Emmet Syntax:

div.divName
Enter fullscreen mode Exit fullscreen mode

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:

<div class="divName"></div>
Enter fullscreen mode Exit fullscreen mode

CREATING AN ELEMENT WITH AN ID

Emmet Syntax

div#divName

Enter fullscreen mode Exit fullscreen mode

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:

<div id="divName"></div>
Enter fullscreen mode Exit fullscreen mode

CREATING AN ELEMENT WITH A CLASS AND ID

Emmet Syntax:

div.divName#divIdName
Enter fullscreen mode Exit fullscreen mode

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:

<div class="divName" id="divIdName"></div>
Enter fullscreen mode Exit fullscreen mode

CREATING A LIST WITH MULTIPLE CHILD ELEMENTS

Emmet Syntax:

ul>li*5
Enter fullscreen mode Exit fullscreen mode

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

ADDING A UNIQUE CLASS NAME FOR EACH CHILD ELEMENT

Emmet Syntax:

ul.list>li.item$*4
Enter fullscreen mode Exit fullscreen mode

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:

<ul class="list">
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
</ul> 
Enter fullscreen mode Exit fullscreen mode

ADDING TEXT INTO AN ELEMENT

Emmet Syntax:

p.pName{Hello World!}
Enter fullscreen mode Exit fullscreen mode

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:

<p class="pName">Hello World!</p>
Enter fullscreen mode Exit fullscreen mode

ADDING MULTIPLE UNRELATED ELEMENTS

Emmet Syntax:

head+body+footer
Enter fullscreen mode Exit fullscreen mode

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:

<head></head>
<body>

</body>
<footer></footer>
Enter fullscreen mode Exit fullscreen mode

GROUPING USING PARENTHESES

Emmet Syntax:

head+(body>div.section$*3>p*2)+footer
Enter fullscreen mode Exit fullscreen mode

By hitting Tab or Command-E, Emmet automatically renders the above syntax into this html output:

<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>
Enter fullscreen mode Exit fullscreen mode

Download the Emmet Cheat Sheet to learn more!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .