I am quite a purist when it comes to writing HTML and CSS or any code for that matter. Scepticism for any way of automating this process is normally quite high. Lately though I have discovered Zen coding which initially I put down as “another one of those crapy scripts”. After giving this a try I jumped on the bandwagon with gusto. Currently I use at least some of the features everyday and here is why…

First a little background, I mostly use Dreamweaver as my code editor, now before you say “I thought you said you were a purist!”, in my opinion Dreamweaver gets a bad rap simply because it has a lot of features that can cause more harm than good. If you use it simply as a code editor then it is quite quick as you can set it up to create whatever flavour of HTML that you wish to validate against. Code completion is one of those tools that I use regularly because it really speeds up the process. In saying all this in defence of Dreamweaver if I had a choice I would not use it as it is big and bloated, unfortunately my workplace thinks differently!

So we have established that I like to have control over my code while still being able to speed up the process by using code completion. If I could speed up that code completion process even further then that would be a bonus right? This is where Zen Coding comes in, it allows me to output clean and basic HTML without all the donkey work of slowly adding the tags that I want. It also has the extra benefit of adding in some required attributes e.g. <label for=”“> I have discovered that some designers or developers do not like to write correct HTML, whether this is laziness or ignorance I’m not sure but having your editor output the required attributes is right up my street as it forces people to know about that element or attribute.

Show me the zen

Zen coding is a plug-in for most of the code editors out there and basically allows you to write shorthand notation to create HTML. If for instance I wanted to create the basic structure for an XHTML transitional document then all I would have to type is html:xt and activate the command that expands this to the full HTML. This exact use is not what I would use regularly as code editors normally have this as default or, as in my case, I have a library of bits and pieces that I use. More useful is being able to wrap HTML around text. If I have text like this:

Home 
About
Portfolio
Contact us

If I want to wrap a un-ordered list around this with a list and anchor tags around each one then normally this would be quite tedious, with Zen Coding you simply select all the text, invoke the command to specify what to wrap and type: ul#nav>li*>a and hey presto you get this:

<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contact us</a></li>
</ul>

Simple, quick and easy! Check out Zen coding for yourself, I would recommend watching the video and it will give you a good overview of what you can do.

Note of warning

As with everything that makes your life easier you have to understand why things are before you go and start using this stuff, If you do not know HTML thoroughly, learn how to use it first! Then you are simply using this to speed up your workflow and not because you do not know how to write HTML correctly and effectively.