March 1, 2021
Hot Topics:

Zen Coding and the Art of Rapid HTML Authoring

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

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:


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:


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.


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".

Page 2 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