Cleanse your coding chi with Zen Coding

What’s Zen Coding?

Zen coding (the newer version is called Emmet) is a plugin that allows you to write html code faster and simpler through abbreviations, equations and symbols. There are some differences between Emmet and Zen coding but the basics are the same.

 Advantages of Zen Coding

The great thing about Zen coding is it still spits out the same normal html code anyone can use. This means you can create large snippets of code in just a few seconds. My favourite example is:

nav>ul>li*5>a

This of course is not standard html text and looks a bit funny if you are not familiar with Zen coding. But after you are done writing it and then press tab it actually turns into this.

<nav>

<ul>

<li><a href=””></a></li>

<li><a href=””></a></li>

<li><a href=””></a></li>

<li><a href=””></a></li>

<li><a href=””></a></li>

</ul>

</nav>

In a few seconds you can create a skeleton of the navigation!

 So let’s break it down

nav>ul>li*5>a

nav>ul : by using the > symbol it implies that the ‘nav’ is higher than the ‘ul’ and therefor above it in the code. You can also picture it as in indent; the ‘ul’ is indented under the ‘nav’ and so inside the ‘nav’ tag.

nav>ul>li*5 : as before this means ‘nav’ with a ‘ul’ and inside those two there is a ‘li’, times 5 means simply 5 times that tag.

The last statement is li*5>a :This means the ‘a’ is inside the li and there is 5 ‘lis’ so 5 a tags as well.

The fun doesn’t stop there, with the simple inclusion of id and class; you can build the frame of your website in minutes.

nav#navbar>ul>li*5>a.button

Turns into

<nav id=”navbar”>

<ul>

<li><a href=”” class=”button”></a></li>

<li><a href=”” class=”button”></a></li>

<li><a href=”” class=”button”></a></li>

<li><a href=”” class=”button”></a></li>

<li><a href=”” class=”button”></a></li>

</ul>

</nav>

So let’s break it down

‘nav’ is the tag I want to create

‘#navbar’ is the ‘id’ I want ‘nav’ to have.

You may notice the syntax is very similar to CSS syntax e.g. ‘nav#navbar’.

By default Zen coding creates a div from an id or class. This lets you quickly set up the main blocks of your website. The plus means inside the same parent tag.


#wrap>header+#main_content+#contact+footer

<div id=”wrap”>

<header></header>

<div id=”main_content”></div>

<div id=”contact”></div>

<footer></footer>

</div>

I could go on for hours on how to use Zen coding to speed up your workflow but luckily both Zen coding and Emmett’s have great documentation on their websites for all the symbols and syntax. Most of it is pretty common sense so I’m sure you will pick it up super fast.


If you want to test it before you download it http://codepen.io/pen/ is a great resource to test it out.

Download Zen Coding Here  Or Emmets