Joshua Hall
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.
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.
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>
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>
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>
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.