How to Write HTML Quickly Using Emmet

For me, personally, one of the most boring parts about starting a new web project is having to structure the initial markup. I’m usually ready to dive straight into planning out the logic, setting up a database, or even just adding some basic styling, yet there I am copy/pasting lorem ipsum text 50 freaking times.

But no more. The time of remembering how to set up a doctype, copy pasting li tags, and even writing out the words ‘class’ and ‘id’ are over. With the Emmet extension, we can now write out a simple shorthand version of our markup, hit tab, and be amazed at the glories of the modern age.

I personally get really crazy with Emmet, writing at least 80% of my page over a few lines and using a CSS library so most of the layout and some styling is done out of the box. When combined with Pug, custom snippets, and Materialize, I feel almost omnipotent.

Installation

You’ll want to follow the installation step for your particular code editor. If you’re using VSCode, it’s actually built right in so you don’t even have to do anything and can start harnessing the power right away.

Basic Syntax

The syntax is very simple, just use the name of the tag you want, like header, ul, or script, and the symbol for the operation you want, and hit tab.

• > Add the proceeding items inside.
• ^ Moves you up out of the current scope.
• + Add the preceding items to the same scope.

<!-- h1+ul>li -->
<h1></h1>
<ul>
  <li></li>
</ul>

<!-- header>nav^footer -->
<header>
  <nav></nav>
</header>
<footer></footer>

<!-- nav>div>h1+img^ul>li+li+li -->
<nav>
  <div>
    <h1></h1>
    <img src="" alt="">
  </div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

Iterations and Grouping

In the above example we had to use three li’s for our list, which becomes quite annoying very fast. instead we can just * and pass in the number of repetitions we want.

<!-- ul>li*2 -->
<ul>
  <li></li>
  <li></li>
</ul>

We can do even more than that, we can group sections of shorthand together using parenthesis (). Let’s make it so we have three groups of this list with two items each.

<!-- (ul>li*2)*3 -->
<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
</ul>

Attributes and Text

We can do even more by adding classes and id’s into our shorthand. Just use a . for a class and a # for an id and append it to whatever you want it to apply to. Any other attributes can be put into brackets [] and typed out normally.

<!-- h1.title+input#name -->
<h1 class="title"></h1>
<input type="text" id="name">

<!-- Let's build on the former example -->
<!-- (ul.list>li.list-item*2)*3 -->
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>
<ul class="list">
  <li class="list-item"></li>
  <li class="list-item"></li>
</ul>

<!-- img[src="#"]+script[src="#"] -->
<img src="#" alt="">
<script src="#"></script>

We can also start adding some basic content by adding what we want in curly brackets {}. Emmet also lets you generate lorem ipsum text with lorem followed by the amount of words you want.

<!-- h1{I'm a title}+p>lorem20 -->
<h1>I'm a title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, expedita earum iste cumque unde perspiciatis nobis adipisci saepe a eum.</p>

<!-- When adding Lorem Ipsum to an li iteration, you can just omit the li's entirely -->
<!-- (ul.list>lorem10.list-item*2)*3 -->
<ul class="list">
  <li class="list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, totam.</li>
  <li class="list-item">Vero iure amet blanditiis iste aperiam velit deleniti officiis consectetur!</li>
</ul>
<ul class="list">
  <li class="list-item">Ad et fuga sed earum veniam eius distinctio, omnis quas.</li>
  <li class="list-item">Error quam cumque eligendi dicta praesentium tenetur cum soluta qui?</li>
</ul>
<ul class="list">
  <li class="list-item">Reiciendis suscipit eveniet magnam ipsum quam? Qui rem consectetur inventore.</li>
  <li class="list-item">Consectetur odit quos commodi nulla eaque, sapiente reprehenderit perspiciatis. Voluptate?</li>
</ul>

Conclusion

Emmet is by far one of my most used tools and, hopefully, after getting familiar with it and taking a look at this awesome cheetsheet, you too may get to experience the productivity boost that it can bring.