Over a million developers have joined DZone.

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

DZone's Guide to

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

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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 -


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>

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.

Stay Digified !!


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

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}