loading...
Cover image for A Quick Reference for the Emmet Plugin
Vets Who Code

A Quick Reference for the Emmet Plugin

nbhankes profile image Nathan B Hankes Updated on ・2 min read

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

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>

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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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 to learn more!

Posted on by:

nbhankes profile

Nathan B Hankes

@nbhankes

Combat Vet, Citizen, Scientist, Writer, INTJ

Vets Who Code

Vets Who Code,is a veteran-operated distributed 501(c)(3) that teaches veterans how to program remotely in leveraging the Javascript ecosystem for free.

Discussion

pic
Editor guide