Пишем 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 доступен для большинства распостраненных редакторов кода.

Сайт проекта