Emmet(Zen Coding)Overview

What is Emmet?

“Emmet (previously known as Zen Coding)

is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow:”

Emmet web site

How to Install it?

You should have one of those IDE

Download Emmet plugin:

Go to http://docs.emmet.io/ and chose your favorite IDE from the list.

Follow the instruction and install the plugin

Some editors support package control and console line plugin installation

Syntax

Expand single element (element name)

You type:

div

p

img

You get:

<div></div>

<p></p>

<img src="" alt="">

Expand multiple elements (*n)

You type:

div*2

p*3

img*2

You get:

<div></div><div></div>

<p></p><p></p><p></p><p></p>

<img src="" alt=""><img src="" alt="">

Add Custom text in elements({})

You type:

p{Lorem ipsum}

a{Click me}

You get:

<p>

Lorem ipsum

</p>

<a href=“”>Click me</a>

Element nesting (>) child nesting

You type:

ul>li

div>p

You get:

<ul>

<li></li>

</ul>

<div>

<p></p>

</div>

Element nesting (+) siblings nesting

You type:

div+div>p+span

You get:

<div></div>

<div>

<p></p>

<span></span>

</div>

Same Level as second div

Same Level as the p element

Element nesting (^) climb up

You type:

div>p>span^span

You get:

<div>

<p>

<span></span>

</p>

<span></span>

</div>

Level 2 nesting Back to Level 1

Element nesting (^) climb up

You type:

div>p>span^^span

You get:

<div>

<p>

<span></span>

</p>

</div>

<span></span>

Level 2 nesting

Outside of nesting

Attributs

Id attribute:

div#header

class attribute

div.someHeader

custom attribute

div[name = “theHead”]

<div id=“header”>

</div>

<div class=“someHeader”>

</div>

<div name=“theHead”>

</div>