Zen Coding Plugin for NetBeans: Its funny

Just tested Zen coding plugin for Netbeans and I have found it funny. It works well. It is available for many others editors as well.
I need to get template for HTML page. For this I used to copy from old html files. Today I tried with zen coding syntax. Zen Coding is available for other IDE as well.

Here is the syntax for getting HTML template with style element in head section.

html>(head>style)+body

will produce


<html>
    <head>
        <style type="text/css"></style>
    </head>
    <body></body>
</html>

Here is complex example from the Zen Coding help file:


<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

For this, the syntax is:
div#page>div.logo+ul#navigation>li*5>a

More Examples from my Experimentation:
div#form>form>(label>text)*3


<div id="form">
         <form action="">
             <label for="">
                 <text></text>
             </label>
             <label for="">
                 <text></text>
             </label>
             <label for="">
                 <text></text>
             </label>
         </form>
     </div>

div#form>form>(div.input>label>input[type="text"])*3+input[type="submit"]


<div id="form">
      <form action="">
          <div class="input"><label for=""><input type="text" /></label></div>
          <div class="input"><label for=""><input type="text" /></label></div>
          <div class="input"><label for=""><input type="text" /></label></div>
          <input type="submit" />
      </form>
  </div>

Sometime you want to have elements with sequence number like div-1, div-2 etc.

p.name-$*3


<p class="name-1"></p> <p class="name-2"></p> <p class="name-3"></p>

This does not work. Check the $ there. It needs number directly after it to expand like 1,2,3
div#form>form>(div.lbl>label+div.inp>input[type="text" value=""].txt-$)*3+input[type="submit"]


div#form>form#term>fieldset>legend>ol>(li>label+input[type="text" value=""])*3+li.submit>input[type=submit]

<div id="form">
      <form action="" id="term">
          <fieldset>
              <legend>
                  <ol>
                      <li><label for=""></label><input type="text" value="" /></li>
                      <li><label for=""></label><input type="text" value="" /></li>
                      <li><label for=""></label><input type="text" value="" /></li>
                      <li class="submit"><input type="submit" /></li>
                  </ol>
              </legend>
          </fieldset>
      </form>
  </div>

div#form>form#term>(fieldset>legend>ol>(li>label+input[type="text" value=""])*3)+fieldset>button[type=submit]


<div id="form">
      <form action="" id="term">
          <fieldset>
              <legend>
                  <ol>
                      <li><label for=""></label><input type="text" value="" /></li>
                      <li><label for=""></label><input type="text" value="" /></li>
                      <li><label for=""></label><input type="text" value="" /></li>
                  </ol>
              </legend>
          </fieldset>
          <fieldset><button type="submit"></button></fieldset>
      </form>
  </div>

I think you may have found the syntax intuitive and easy to understand.

Zen Coding CheatSheet Download