HTML Coding Made Easy With Zen Coding

Zen Coding is one of the best HTML coding assistant ever created. Confusing at first and perhaps a little tricky to get around, but once you get the hang of it, nothing can beat the ease it will bring to a coder’s life.

Zen Coding is basically a set of plugins that can work with a huge variety of text editors (Notepad++, Coda, Espresso, Aptana, Komodo etc, to name a few). Their specialty is to expand abbreviations into complete HTML structures, in a most intelligent, unbelievable way.

image

The HTML structure shown in the screenshot is all courtesy of just a couple of lines, expanded by Zen Coding itself. As visible in the screenshot, the plugin shows itself as a menu in the main toolbar when it is integrated with Notepad++. This may change from editor to editor.

Coming to a brief overview of how this works, let’s see how that first HTML block was created in the above screenshot. The command used is shown below.

ZEN

This simple syntax guides thus. The expansion starts with a “div” tag, and anything after the # will identify the “id” for the previous tag. The > shows how child tags will ascend from which tag, which in this case are ‘table’, ‘tr’, ‘td’ etc. The multiplier by 5 indicates that the preceding tag needs to be repeated this many times. Finally, the hyperlink tag gets associated with a ‘class’ as well, specified through the use of the period. Hence, this one syntax translates to this:


ZEN2

The possibilities with Zen Coding are enormous. This one command that I touched on above, does not even come close to the beginning. Bringing a little variation to your syntax can invoke a lot of variety to your HTML output. Take for example, the syntax and the HTML output below.

ZEN

Here, I have just used the + markers to add more than one tags of the same kind, and even used multipliers in between.

Covering all the features of Zen Coding is beyond the approach of this review, hence we welcome you to explore the plugin. Zen Coding can become the lifeline for any HTML coder, CSS artist, etc, and can even attract those who just want to experiment with it. You will be hard pressed to find anyone who has something bad about Zen Coding, they’re really that good.

On the download link provided below, there are a couple of screen casts that allow an overview of features offered. Do check those out.

Zen Coding plugins are available for several cross-platform text editors.

Download Zen Coding

[via DownloadSquad]

Advertisement
  • Yngve B. Nilsen

    This is now also available as a Visual Studio 2010 Add-In at yngvenilsen.wordpress.com :)