Zen Coding – a new way of writing HTML and CSS code

Good news for all the web designers and developers, if you already not aware of Zen Coding. It’s a new and awesome way to write your HTML, XML, XSL. The concept of Zen Coding is based on a powerful abbreviation engine. It allows you to expand code which you originally write as abbreviations. You have to follow the CSS selectors pattern while writing the abbreviation code. Ok enough of talking now let’s see it in action.

An example of abbreviation code is -

div#container>div.menu>ul#nav>li*5>a>span

It’s a nested abbreviation and fairly simple to understand. Start reading from left to right and it will make sense when you will see the following expanded code.

<div id="container">
    <div class="menu">
        <ul id="nav">
            <li><a href=""><span></span></a></li>
            <li><a href=""><span></span></a></li>
            <li><a href=""><span></span></a></li>
            <li><a href=""><span></span></a></li>
            <li><a href=""><span></span></a></li>
        </ul>
    </div>
</div>

Yes, when you will write the abbreviated code, it will expand it to the real code – Magic ? It’s an awesome technique to write the much repeated tags of HTML while you are writing HTML for the webpages.

Where & How it works ?

Zen Coding is a project hosted on Google Code http://code.google.com/p/zen-coding/ . It has extension for all major editors, including my favorite Netbeans . Once you install the extension successfully then its matter of writing the abbreviation code and expanding it. I am going to explain how I made it work on Netbeans, using the following steps -

1. Download the Zen Coding extension for Netbeans from here .
2. After successful install and restarting your ID, type the abbreviated code as shown above.
3. Now press ctrl+alt+n and tada see the magic !

Hope that Zen Coding is going to save lot of time of yours while writing your HTML code.

From http://www.digimantra.com/tips/zen-coding-writing-html-css-code/