Do you code in HTML? Does the sight of lines of HTML makes you sick? Do you want to speed up your workflow? If "Yes!" is the answer to any of these questions, then you must try Zen Coding — a powerful tool to write lines of HTML (and CSS) in just a few letters. Zen Coding uses simple abbreviations (which you can hardly forget) to expand them into valid HTML syntax. The best part of it is its robust integration with almost every popular IDE.

How It Works

Once you install Zen Coding plug-in to your favorite text-editor, you are ready to go. For example, type the following in your text-editor:

div#wrapper>div#right+div#left

Now, hit CTRL+E and see the magic:

<div id="wrapper">
<div id="right"></div>
<div id="left"></div>
</div>

The short-codes are so self-explanatory that you hardly need any time to catch how they work. Zen Coding also supports expanding CSS short-codes. You can find a cheatsheet of all the available short codes in the download section. Geeks, you can even write your own custom short-codes and expansions!

Supported IDEs

Zen Coding fully supports a bunch of popular text-editors including Notepad++, Textmate, Coda, Komodo, Aptana/Eclipse, GEdit, Dreamweaver, Emacs, Vim. You can even include Zen Coding features in <textarea> fields in your browser.