http://www.developer.com/

Back to article

Zen Coding and the Art of Rapid HTML Authoring


June 1, 2010

For all their power, editors such as the NetBeans IDE haven't really reduced the work required for coding HTML. Even with useful IDE features such as keyboard shortcuts and bracket completion, writing the generally large amounts of HTML required for my various web projects quickly becomes tedious. Not to mention the additional time spent debugging issues due to mismatching tags and missing element IDs. Luckily for Web developers, a new solution can greatly speed up the HTML development process. Dubbed Zen Coding, this self-described "abbreviation engine" enables you to write HTML with amazing speed and efficiency thanks to a syntax that allows you to create compact "statements" and expand them into well-formatted HTML structures.

Sound strange? Consider an example. Suppose you would like to create the following unordered list:

<ul id="languages"> <li></li> <li></li> <li></li> </ul>


Although this is a simple HTML construct, writing the 50 characters manually would take a while. To save some time, you probably would copy and paste the <li> tag lines and maybe need to double back because you forgot the <ul> ID. Using Zen Coding, you could create the same structure by typing a mere 17 characters:

ul#languages>li*3


The time savings are so significant that I actually used Zen Coding to format this article!

Installing Zen Coding

Zen Code is officially available as a plugin for many of the most popular IDEs, among them Aptana, NetBeans, and Komodo. You'll also find third-party support for other popular editors including Dreamweaver, GEdit, UltraEdit, and Visual Studio. To see if Zen Coding is supported on an editor not mentioned here, head over to the Zen Coding website. The installation process will vary by IDE of course, but as an example installing Zen Coding on GEdit was as simple as downloading the zen-coding-gedit plugin from GitHub and copying it into my GEdit plugins directory.

Using Zen Coding Syntax

I'll devote the remainder of this article to a whirlwind introduction of Zen Coding's powerful abbreviation syntax. The key bindings used to convert the Zen Coding syntax into the HTML equivalent will vary according to your IDE plugin, so I won't bother with mentioning the particular GEdit bindings I use here. Just be sure to consult your particular plugin's documentation for all the details.

Expanding a Tag

To expand an HTML tag, you just type the tag name into your editor and use your editor's designated hotkey to perform the expansion. For instance when using Gedit you can convert ul into <ul></ul> by typing the former and pressing the Ctrl+E key.

Adding Child Elements

A lone <ul></ul> element isn't of much use. You probably would nest a few <li></li> elements. To do so, use the > character:

ul>li


A more complex structure might require you to nest several different elements. To do so, you can use a combination of the > and + characters. Consider the following Zen Coding statement:

h3>p+ul>li|e


Completing this statement will produce the following HTML:

<h3> <p></p> <ul> <li></li> </ul> </h3>


Using Multipliers

A lone <li></li> element will probably not do for most unordered lists. Instead, you should add several. While you could string together a series of + signs, an easier solution would be to use Zen Coding's multiplier (*) syntax. For instance, suppose you wanted to nest three <li></li> elements:

ul>li*3


Expanding this sequence produces the following output:

<ul> <li></li> <li></li> <li></li> </ul>


Adding CSS IDs and Classes

As was demonstrated in the initial example, you can assign CSS IDs and classes when generating HTML by postfixing the element with a hashmark (#) or period (.) followed by the ID or class name, respectively. For instance, the following snippet will assign an ID of navigation to the ul element, and a class name of item to each list item:

ul#navigation>li.item*3


Expanding this snippet produces the following output:

<ul id="navigation"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>


Using Filters

Zen Coding isn't limited to mere HTML expansion. In fact, thanks to filters you're able to perform all sorts of interesting post-processing tasks such as converting HTML into its corresponding HTML entities (which I've done throughout this article to render the HTML tags) by appending the |e filter to the end of your Zen Coding syntax. Consider the following example:

ul>li*3|e


Executing this example will produce the following output:

&lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt;


Numerous other filters are available, including those that support Haml conversion, the addition of HTML comments, CSS abbreviation expansion, and others.

Conclusion

Like jQuery and Blueprint, Zen Coding is one of those rare tools that offers web developers an immediate productivity boost. In just a few short weeks it has already become an indispensable part of my toolbox. What other developer tools do you use to boost your productivity? Tell us about them in the comments!

About the Author

Jason Gilmore is the founder of EasyPHPWebsites.com. He also is the author of several popular books, including "Easy PHP Websites with the Zend Framework", "Easy PayPal with PHP", and "Beginning PHP and MySQL, Third Edition".

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date