Zen Coding in HTML

Zen Coding is a series of shortcuts that will generate HTML code for you and save you a lot of typing. It’s actually open source and you can find the code on GitHub if you are interested. But all you really need to do is install vs web essentials and try it yourself! The rest of this blog shows you some great zen coding examples to save you time.

Let’s start with something simple. Type
div

now hit the <Tab> key and you get
<div></div>
It always slows me down to type all the opening and closing tags.
now try this followed by the <Tab> key
ul>li
You get
          <ul>
            <li></li>
        </ul>

Starting to see the potential? Imagine you wanted to build a table…

table>tr>td
becomes
    <table>
            <tr>
                <td></td>
            </tr>
   </table>
But wait, it gets better… because you can specify multiples, try this
table>tr*5>td*3
Now you get a table definition for 5 rows with 3 columns

<table>

            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
         …
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
There are lot of other options are ther in VS 2012 .