Пишемо HTML-код швидше

Zen Coding - плагін для редакторів коду, який дозволяє швидко створювати HTML , XML , XSL розмітку. Принцип роботи заснований на використанні абревіатур для позначення HTML-тегів , їх атрибутів , а також їх вкладеності .

Почнемо із простого. Пишемо в редакторі:

натискаємо Ctrl-E (комбінація клавіш залежить від редактора) і отримуємо:

Вкладення символізує символ ">" . Також є можливість вказати кількість елементів:

=

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

Приклад складніший. Типовий код HTML -документа:

 <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>

З Zen Coding це робиться так:

Також плагін підтримує угруповання елементів за допомогою круглих дужок:

=

 <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>

Загалом, вся розмітка HTML -сторінки може бути написана одним рядком.

На даний момент плагін Zen Coding доступний для більшості поширених редакторів коду.

Сайт проекту