Zen Coding: Agility in the development of interfaces

Posted by Gilson Filho on qui 03 fevereiro 2011

Hello guys,

Develop HTML pages and style sheets is a pain, especially when you need to develop a front-end module for yesterday. With that, Sergey Chikuyonok created what we call the Zen Coding, which are scripts that from abbreviations, it automatically generates HTML tags (and the selectors within these tags), XML and XSL.

In this post today, I'll show how to use this tool and their abbreviations.


Zen Coding has various scripts for various publishers, such as:

  • TextMate;

  • Coda;

  • Espressos;

  • Notepad + +;

  • Dreamweaver;

  • Sublime;

  • UltraEdit;

  • Netbeans;

  • Gedit;

  • Vim;

  • and others.

For that you will on this site , and there will be several packages, and with this download as the IDE you use. In relation to Vim and Gedit, plugins are these:

Zen Coding Gedit plugin: https://github.com/mikecrittenden/gedit-Zen-coding

Zen Coding Vim Plugin: http://www.vim.org/scripts/script.php?script_id=2981


With the plugin installed in your IDE or editor, you have to enter abbreviations that represent the tags you want to insert in your document (X) HTML, XML or XSL.

Recalling that the focus of this post is to teach using the abbreviations of HTML.

In (X) HTML you have two types of abbreviations: Elements and selectors. We will detail each one of them.

Abbreviations Elements

These abbreviations represent their own tags (X) HTML. For example, I want to create the html tag more quickly:


And then, Zen Coding will generate this:


The tool checked the abbreviation you entered was to generate the html tags. But how did this? That depends on the plugin you installed, which means that each IDE has its respective shortcut. You enter the abbreviation and then click the action of Zen Coding and then invokes this shortcut.

Below are other examples:

  • Create an html tag, insert the head and body in:


Analyzing this expression you will see who has more than one abbreviation. The ">" character is used to generate a tag that would be the head, inside html. The character "+" server to enter a tag next to each other. With this the head tags, will be on the side of the body tag.

Done that it will generate these tags:


Now I want to insert the header of an XHTML document for example. I insert the following abbreviation:


And then she'll let me create this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"></html>

Okay, so not much quicker things. But if you do, save a little time already ;)


After entering the above abbreviation, click the menu item of the tool of your IDE (or shortcut) for the Zen Coding verify the expression and generate it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>


And finally, for HTML 5:


<html lang="ru-RU">
    <meta charset="UTF-8">


This link has all the existing tags.

Abbreviation for Selectors

These abbreviations are used in CSS selectors for you to insert the tags as well as attributes. See examples:

  • Insert an id in the div tag:


  • Insert a tag in the class p__:


  • Entering an id and a class in the div tag:


- _Entering an id and two classes in the _ul tag:


<ul id="menu" class="classe01 classe02"></ul>
  • Inserting an attribute in tag p:


This link has all the selectors used.

Below has a video of the creator himself, showing how to use Zen Coding:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.


Comments !