October 28, 2020
Hot Topics:

Zen Coding and the Art of Rapid HTML Authoring

  • By Jason Gilmore
  • Send Email »
  • More Articles »

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:


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:


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:


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:


Expanding this sequence produces the following output:

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

Page 1 of 2

This article was originally published on June 2, 2010

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

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