Writing HTML Code Faster

Zen Coding is a plugin for code editors that allows you to quickly create HTML , XML , XSL markup. The principle of operation is based on the use of abbreviations to denote HTML tags , their attributes , and their nesting .

Let's start simple. We write in the editor:

press Ctrl-E (key combination depends on the editor) and get:

Nesting symbolizes the symbol ">" . It is also possible to specify the number of elements:

=

 <ol>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ol>

The example is more difficult. Typical HTML document code:

 <div id="header">
 <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>

With Zen Coding it's done like this:

The plugin also supports grouping elements using parentheses:

=

 <div id="wrap">
 <div id="header">
 <ul id="nav">
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 </ul>
 </div>
 <div id="page">
 <h1><span></span></h1>
 <p></p>
 <p></p>
 </div>
 <div id="footer"></div>
 </div>

In general, the entire markup of an HTML page can be written on a single line.

The Zen Coding plugin is currently available for most common code editors.

Project website