[Textmate] Zen Coding - a super fast way to create HTML

Zen Coding is a really simple shortcut syntax for the quick creation of HTML structures. Find bundles and integrations for all major text editors and IDEs here.

The best thing of Zen Coding is, that the syntax is very easy to learn and immediatly feels very natural to use. When you got it running, you basically just have to remember the shortcuts CMD + E for Expanding tags and CMD + SHIFT + a for wrapping content with tags (Textmate). The rest is easy. Here are a few examples:

p [CMD + E]

<p></p>

p#indentifier [CMD + E]

<p id=”identifier”></p>

p.classname [CMD + E]

<p class=”classname”></p>

p>ul [CMD + E]

<p>
<ul>
</ul>
</p>

p>ul>li*2 [CMD + E]

<p>
<ul>
<li></li>
<li></li>
</ul>
</p>

Of coure you can combine those commands in various ways and adapt it to any HTML tag you can think of. Therefore you are able to write almost any kind of HTML nested tag structure with one line of simple code. Big time safer!

Further more you can wrap existing text content with tags by selecting it and CMD + SHIFT + a. An Input form will then pop up an let you specify the wrapping tag structure.

Interested? Find an additional video instructions on Zen Coding here. It’s a big recommendation from my side for everyone who needs to put hands on writing or editing HTML code.