Tutorial

How to Write HTML Quickly Using Emmet

Published on July 2, 2019
    Default avatar

    By Joshua Hall

    How to Write HTML Quickly Using Emmet

    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.

    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.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Joshua Hall

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    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!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel