Emmet — the essential toolkit for web-developers

Emmet (formerly Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

With Emmet, you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

For example, this abbreviation:

ul#nav>li.item$*4>a{Item $}

...can be expanded into:

<ul id="nav">
	<li class="item1"><a href="">Item 1</a></li>
	<li class="item2"><a href="">Item 2</a></li>
	<li class="item3"><a href="">Item 3</a></li>
	<li class="item4"><a href="">Item 4</a></li>
</ul>

Learn more about Emmet features