My Emmet starter guide

Emmet (formerly known as Zen Coding) is designed to speed up the way you write HTML. Installed easily as a plugin for most text editors, after writing a line of Emmet-style code all you have to do is press the tab button to expand it into all of it’s HTML goodness.

Once an Emmet line is expanded into HTML, you can tab through to be brought to each area of the code where you would then need to add more information.

The Basics

Setting up your page

html:5

Will output this HTML 5 skeleton

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

Adding the viewport meta tag

meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Main Emmet Lines

img[src=http://placehold.it/50x50]

<img src="http://placehold.it/50x50" alt="">
h1{Hello World}

<h1>Hello World</h1>
div>h1{I'm a child of a div!}

<div>
     <h1>I'm a child of a div!</h1>
</div>
div>h2+p

<div>
     <h2></h2>
     <p></p>
</div>
select>option[value=$]*3

<select name="" id="">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
</select>

It’s important to note that Emmet is not an alternative to HAML, you can actually use the two together.

Any line of Emmet, can be expanded into HAML instead of HTML by adding |haml to the end of your line. If you are working in a HAML file, Emmet should automatically expand to HAML without adding anything to the line.

section#wrapper>h2+p|haml

%section#wrapper
    %h2
    %p 

Further Reading

Emmet Cheatsheet

More info

[ Back to All ]

You can find me online @

LinkedIn / Twitter / Github / Codepen / Dribbble