Tutorial

Write HTML Faster with Emmet: An Interactive Guide

Draft updated on Invalid Date

HTML

Chris on Code

Write HTML Faster with Emmet: An Interactive Guide

This tutorial is out of date and no longer maintained.

Introduction

From the official Emmet website, “Emmet is a plugin for many popular text editors which greatly improves HTML and CSS workflow”. Short and to the point. Emmet can increase your workflow when building sites Emmet also used to be called Zen Coding for those of you that see the syntax is familiar.

Try It Out!

Just go to the end of this line and press TAB.

Bonus: Press TAB multiple times to travel through the Emmet created HTML.

ul.my-list>li*3>a.item$

Emmet supports many different editors from Sublime Text (our favorite) all the way to the great online editor Ace. We’ll be focusing on using Emmet in Sublime but it should work the same way across the board.

How To Use Emmet

To see all the ways to use Emmet, you can visit that Emmet Github Available Actions. The main ways to activate Emmet (make sure you’re in an HTML syntax file):

Tab Expand: Type out your Emmet code and press TAB
Interactive Abbreviation: CTRL+ALT+ENTER

Once you expand the code, you can press TAB and move through your HTML code to all the parts that require input. This is a very fast way to move through your HTML.

Now that we can use Emmet and can see how fast it makes our workflow, let’s test ourselves and see how fast we can build out an entire site.

What We’re Building

We will be creating 4 different sections and each will deal with certain features of Emmet.

Basic HTML Foundation (HTML abbreviations and custom attributes)
Header and Navbar (Item numbering, text, multiplication, and children)
Jumbotron (Siblings)
Two Columns (Grouping)

The HTML

Normally, to create this entire page, you’d have to go through and write all the HTML yourself. While some might say this isn’t really a big deal, I like to think that every millisecond saved during the development process adds up to a lot of time. After all, we’re all about trying to be efficient right?

This demo uses Bootstrap 3.

<!doctype html>
<html>
<head>
    <title>Speedy HTML</title>
        
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
    
        <!-- HEADER AND NAVBAR -->
        <nav class="navbar navbar-inverse">
            <div class="navbar-header"><a href="#" class="navbar-brand">Speedy</a></div>
            <ul class="nav navbar-nav">
                <li><a class="menu-1" href="#">Menu Item 1</a></li>
                <li><a class="menu-2" href="#">Menu Item 2</a></li>
            </ul>
        </nav>
    
        <!-- GIANT JUMBOTRON TEXT -->
        <div class="jumbotron text-center">
            <h1>Speedy HTML</h1>
            <p>Faster than a lion chasing a gazelle.</p>
            <a href="#" id="go-button" class="btn btn-danger">Learn More</a>
        </div>
    
        <!-- TWO COLUMN INFORMATION -->
        <div class="row text-center">
            <div class="col-sm-4">
                <div class="info-box">
                    <span class="glyphicon glyphicon-fire"></span>
                    <h2>Lions</h2>
                    <p>Super fast. Especially when hungry.</p>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="info-box">
                    <span class="glyphicon glyphicon-send"></span>
                    <h2>Emmet</h2>
                    <p>Even faster. Especially in the hands of a developer.</p>
                </div>
            </div>
        </div>
    
    </div>
</body>
</html>

We will break down each different section and show how easy it is to build it using Emmet with only 1 line.

Each section will introduce us to something new that Emmet offers us. With Emmet, we can create things like children, siblings, text, incrementing numbers, and even custom attributes.

Writing HTML With Emmet

HTML Starter (abbreviations, custom attributes)

Emmet comes with abbreviations that are very similar to snippets. Just type html:5 and press TAB to start an HTML 5 document.

Try It Out!

Type html:5 and press TAB.
After <title> let’s add our Bootstrap reference using:

link[rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"]

The Header and Navbar (children, climbing, custom text, counting items)

The cool things in this section are the ability to climb up in our HTML (^), create custom text ({}), and count items ($).

Here is the line we use in Emmet. Just type it and press TAB.

nav.navbar.navbar-inverse>div.navbar-header>a.navbar-brand{Crazy Fast}^ul.nav.navbar-nav>li.menu-$*3

This might seem like a lot and be tedious, but once you get the hang of the Emmet code, development can fly by pretty fast.

The Jumbotron (siblings)

Our main focus here will be using the siblings (+) generator. With this, we can create elements side by side.

div.jumbotron.text-center>h1+p+a#go-button.btn.btn-danger

Two Column Information (grouping)

Our focus in this section will be the grouping (). This allows us to create sections of code together.

div.row.text-center>(div.col-sm-4>div.info-box>span.glyphicon.glyphicon-fire+h2{Lions}+p)+(div.col-sm-8>div.info-box>span.glyphicon.glyphicon-send+h2{Emmet}+p)

Conclusion

Just like that, we have an entire HTML page in just 5 lines of code. If you wanted to be really fancy about it, you could even get this down to 1 line!

Bonus!

Let’s do it in 1 line.

html:5>div.container>(nav.navbar.navbar-inverse>div.navbar-header>a.navbar-brand{Speedy}+ul.nav.navbar-nav>li*2>a.menu-${Menu Item $})+(div.jumbotron.text-center>h1{Speedy HTML}+p+a#go-button.btn.btn-danger{Learn More})+(div.row.text-center>(div.col-sm-4>div.info-box>span.glyphicon.glyphicon-fire+h2{Lions}+p)+(div.col-sm-8>div.info-box>span.glyphicon.glyphicon-send+h2{Emmmet}+p))

This is just a taste of what Emmet has the power to do. It even has abbreviations for CSS. I would highly encourage taking a look at the Emmet Cheat Sheet to get a feel for all the great things this tool can do.

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

Learn more about our products

About the authors