Build a Web Page Fast with Emmet.io

I’ve been developing a lot of elearning design in HTML5 recently, and I’ve been rediscovering how much I love working with Emmet.io (formerly known as Zen Coding). It’s a simple syntax that lets you string together shortcuts for HTML elements, and then POOF! expand them into a complete website. It makes coding HTML so fast and effortless, taking much of the drudgery out of opening and closing HTML tags.

Emmet is a free plugin that you can add to your favorite text editor. Here, I have it working with Panic Coda editor for Mac, but I also like to use it in Atom.io and Brackets.io, two great free cross‐platform text editors.

Watch and Learn

Start with an HTML Page Template

In the example above, I first create a basic HTML5 page template just by typing

html:5

when I press [TAB], Emmet expands that text to

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

Which is a nice way to get started writing a web page! We can change the contents of the title tag to give our web page a title and we’re up and running!

Build a Page with a Simple String of Text

I then go on to write this syntax:

h1{My Awesome Page}+(h2{Header Item $}+p{Lorem})*5

When I press [TAB], it creates an H1 element containing the text “My Awesome Page”.

Multiplying Parentheses

Next, I use the parentheses to enclose the following H2 and P tags, and, at the end of the string, I multiply the parentheses by 5 – this creates five pairs of those H2 and P elements.

Curly Braces: Text Inside Your Element

As you’ve guessed by now, you can follow an HTML element like H2 with {curly braces} so you can enter text inside that element. In h2{Header Item $}, the dollar sign tells Emmet to insert an ascending number in that place, so I end up with

• Header item 1
• Header item 2
• Header item 3
• Header item 4
• Header item 5

The Plus Sign: Nesting with Care

Emmet has amazing tools for helping you manage how your elements nest inside of each other in the document object model (DOM). I used a + sign to tell Emmet that these elements were “siblings” – that is, they are both inside the same parent element. I could have just as easily used > to nest the second element inside the first.

Lorem Ipsum: Dummy Text when You Need It

Inside the p element, I have

p{lorem}

Placing my cursor inside those brackets and pressing [TAB] expands this to add some “dummy text” – handy when you want to show off what a page will look like with text.

p{Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.}

This is still in Emmet format, though, and so we have to go to the end of the whole Emmet code string to press [TAB] again and expand everything into valid HTML. The resulting code looks like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Awesome Page</title>
</head>
<body>

    <h1>My Awesome Page</h1>
    <h2>Header Item 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.</p>
    <h2>Header Item 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.</p>
    <h2>Header Item 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.</p>
    <h2>Header Item 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.</p>
    <h2>Header Item 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.</p>

</body>
</html>

From there, it’s a simple matter to change all that dummy text to your own writing, and you’ve got a beautiful page design in no time flat!

Emmet and Bootstrap

Emmet is especially handy when you are working with an HTML template like Twitter Bootstrap where you can design a whole page by nesting elements and using class attributes to invoke elements.

In this example, I turn this string of Emmet text into a beautiful page layout with multiple columns, headings, and images.

.container>.row>.col-md-12>h1.text-success{Emmet and Bootstrap 3}^^.row>(.col-md-4>h2{Heading $}+img[src="http://lorempixel.com/300/300/city/$"]+p{Lorem})*3^^^.row>(.col-md-3>img[src="http://lorempixel.com/g/200/200/nature/$"])*4

Once you learn the basic building blocks of Emmet, you can crank out a page design in a fraction of the time it would take you to code the whole thing!

Learn the Basics

It may seem complicated, but everything I’m doing all comes from these 7 simple to master tricks. Keep this guide by your side and experiment with how Emmet can add speed and enjoyment to your HTML coding life!