Post

8 Emmet Tips You Might Not Know

Draft updated on Invalid Date
    Default avatar

    By Chris on Code

    8 Emmet Tips You Might Not Know

    This tutorial is out of date and no longer maintained.

    Introduction

    Emmet (who remembers when it was called Zen Coding?) is a very useful code editor tool that brings snippets and supercharged shortcuts for generating HTML/markup and even CSS.

    Save tons of time in your daily workflow by learning more of Emmet syntax. Also remember that all of these examples will be in plain HTML files, but you can also configure Emmet to be used with React/JSX, Angular templates, Vue templates, and more.

    To give you a quick example of Emmet’s main use, expanding an abbreviation into full HTML.

    We’ll be typing the following and pressing tab to expand it:

    section.hero.is-info>.hero-body>.container>h1.title{Hello!}
    

    The following will be expanded to:

    <section class="hero is-info">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">Hello!</h1>
        </div>
      </div>
    </section>
    

    Emmet can be found already installed by default on most editors including Sublime Text, VS Code, and WebStorm. For more info on Emmet, check out:

    Let’s dig into some of the lesser-known features of Emmet. Oh and before we get into it, here’s some info about my setup:

    Grouping and Sibling

    By using () we can group code together. This works well with the sibling + operator.

    Let’s say we wanted two divs to sit next to each other and each has its own children. Notice we’ll be using Bulma CSS classes.

    Related Reading: See why Bulma is My Current Favorite CSS Framework

    .columns>(.column>.box>h2{I am a box})+(.column>.box>h3{I am another box})
    

    This will be expanded to:

    <div class="columns">
      <div class="column">
        <div class="box">
          <h2>I am a box</h2>
        </div>
      </div>
      <div class="column">
        <div class="box">
          <h3>I am another box</h3>
        </div>
      </div>
    </div>
    

    Climbing Up

    One neat trick Emmet can do is climb back up the tree with ^ if you find yourself nested too far down. I’ve found that using grouping more means I don’t have to climb up the tree. It is useful in some scenarios so it’s good to know.

    Here’s another way to achieve our previous example with climbing up:

    .columns>.column>.box>h2{Box}^^.column>.box>h3{Box}
    
    <div class="columns">
      <div class="column">
        <div class="box">
          <h2>Box</h2>
        </div>
      </div>
      <div class="column">
        <div class="box">
          <h3>Box</h3>
        </div>
      </div>
    </div>
    

    I much prefer the grouping way.

    Numbering

    When I’m building out some sample HTML, it’s often helpful to use numbering to differentiate sections. (Section 1, Section 2, etc).

    Emmet can also help us with numbering using $. I did a Tweet about this the other day and that’s what sparked me to write this post!

    p>strong{I am level $ strong!!!!}*10
    
    <p>
      <strong>I am level 1 strong!!!!</strong>
      <strong>I am level 2 strong!!!!</strong>
      <strong>I am level 3 strong!!!!</strong>
      <strong>I am level 4 strong!!!!</strong>
      <strong>I am level 5 strong!!!!</strong>
      <strong>I am level 6 strong!!!!</strong>
      <strong>I am level 7 strong!!!!</strong>
      <strong>I am level 8 strong!!!!</strong>
      <strong>I am level 9 strong!!!!</strong>
      <strong>I am level 10 strong!!!!</strong>
    </p>
    

    HTML Tags Expansions

    This is something that I really need to use more in my workflow. It gets tedious typing out some of the HTML tags.

    I’ll put this in a list since there are so many to name. Definitely check out the Emmet Cheat Sheet in the HTML section to see all of these.

    • !: Full HTML page
    • a: <a href=""></a>
    • base: <base href="" />
    • link:css: <link rel="stylesheet" href="style.css" />
    • script:src: <script src=""></script>
    • input:text: <input type="text" name="" id="" />
    • input:t: <input type="text" name="" id="" />

    Attributes

    By using [] we can add attributes to our HTML. For example,

    `` input[type=email].my-input

    
    will become:
    
    ```html
    <input type="email" class="my-input">
    

    Here’s a cool one using data-attributes and numbering:

    div[data-item=$]*10
    
    <div data-item="1"></div>
    <div data-item="2"></div>
    <div data-item="3"></div>
    <div data-item="4"></div>
    <div data-item="5"></div>
    <div data-item="6"></div>
    <div data-item="7"></div>
    <div data-item="8"></div>
    <div data-item="9"></div>
    <div data-item="10"></div>
    

    Wrap with Abbreviation

    This is one that I found out about recently and am super excited to add this to my daily toolset.

    Select any code and surround it with the tags you want. This requires a little more legwork and you’ll need to open up your Command Palette (CTRL+SHIFT+P or COMMAND+SHIFT+P).

    The instructions for Visual Studio Code is as follows:

    1. You’ll need to place your cursor on the tag you want to wrap.
    2. Open your command palette with CTRL+SHIFT+P (or COMMAND+SHIFT+P).
    3. Find Emmet: Wrap with Abbreviation.
    4. Type in your Emmet abbreviation that will wrap your current tag.

    Could be very useful!

    Tag Balancing

    This is also one I found recently that is brilliant. Ever look at an opening HTML tag and wonder where it’s closing tag is? Ever wanted to select everything inside of the opening/closing tags? Tag balancing to the rescue!

    1. Place your cursor inside the tags you want to find.
    2. Open the command palette with CTRL+SHIFT+P (or COMMAND+SHIFT+P).
    3. Select Emmet: Balance (Outward).
    4. Do this multiple times to keep expanding outwards.

    CSS

    In addition to markup files, Emmet can be used in CSS. Very useful to expand some things that require a lot of typing. I’ll show off a few of my often used ones:

    • pos: position: relative;
    • d: display: block;
    • m: margin: ;
    • mt: margin-top: ;
    • mb: margin-bottom: ;
    • pw: padding-top: ;
    • pb: padding-bottom: ;
    • bg: background: #000;
    • !: !important
    • @m: @media screen {}
    • c: color: #000;
    • op: opacity: ;

    Conclusion

    Hopefully, you’ve gained a few more Emmet skills to add to your toolset. I’m a big believer in putting in the time to learn the tools we have so that we can be more efficient developers.

    Let me know if you liked this post and we’ll do more tips and tricks for ways to improve your workflow.

    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
    Chris on Code

    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