Emmet (formerly Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow. Last year my blogpost gives insight on Zen Coding with Notepad++. Things have changed since last year and for better. I haved ditched Notepad++ for SublimeText2 and ZenCoding project is changed to Emmet project. Emmet is developed and optimised for web-developers whose workflow depends on HTML,XML,XSL and CSS, but can be used with programming languages too. Emmet plugins are currently available for the following editors:

Eclipse/Aptana,Sublime Text 2,TextMate 1.x,Coda 1.6 and 2.x,Espresso,Chocolat,Komodo Edit/IDE,Notepad++,PSPad,CodeMirror2/3,Brackets

Head over to the Emmit.io webpage and follow the instructions for the specifics on the install for your editor.
Here in I present a sneak preview of the awesomeness of Emmit in the context on SublimeText 2.
Open a new Document and save it as yourfilename.html

1
html:5

and hit the TAB or use the hotkey Ctrl+E , it outputs the following code:

1
2
3
4
5
6
7
8
9
10
11
 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
 
</body>
</html>

Hang on we are just getting started here. Now type in the following:

1
2
 
div#content>form:get>input:text[name="userName"]#usrName

Hit Ctrl+E, see the output

1
2
3
<div id="content">
	<form action="" method="get"><input type="text" name="userName" id="usrName" /></form>
</div>

By now you should be jumping in joy, for those who need to see more..here is another example

1
2
 
ul>li.listItems$*5

Hit Ctrl+E, see the output

1
2
3
4
5
6
7
8
 
<ul>
	<li class="listItems1"></li>
	<li class="listItems2"></li>
	<li class="listItems3"></li>
	<li class="listItems4"></li>
	<li class="listItems5"></li>
</ul>

Links:

Emmet.io
Emmet.io on GitHub
Notepad++
SublimeText2

“Programmers worth their salt loathe drudgery”
~Rushi