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.