Emmet, the latest update of the Zen Coding plugin, is authored by Sergey Chikuyonok, the Russian front-end web-developer and writer. When added to your coding text editor, Emmet can boost your productivity levels and will thus impress any web development team leader or CIO.

Emmet uses what are known as Dynamic Snippets, which are abbreviations that get transformed at runtime, and are the nucleus of the Emmet toolkit. The special expressions are parsed in runtime and then transformed into structured code block, CSS, and HTML code, for instance. The central concept of Emmet is that it provides improved workflow with enhanced high-speed coding for web developers who work primarily with HTML and CSS — but can be used for other programming languages as well. The highly portable Emmet is written in JavaScript and works across different platforms including web browsers, Node.js, Microsoft Windows Script Host (WSH), and Mozilla Rhino.

Download Emmet

The download is available for fifteen popular web developer text editors, including cross-platform versions for Sublime Text, Eclipse, Brackets, Komodo Edit, and NetBeans. Downloads for online services include JSFiddle, JSBin, CodePen, and ICEcoder. Third-party support is available for SynWrite, WebStorm, PhpStorm, Vim, and HTML-Kit; however, the plugins developed by third-party developers for these third-party editors may not support all Emmet features and actions. The downloads page is displayed in Figure B below.

Installation

For this demonstration, I downloaded the Emmet for Dreamweaver version and installed the plugin manually, pulling down the Emmet.zxp file and double-clicking it. It opens the Adobe Extension Manager for Adobe products, and installs the plug-in into Dreamweaver, as shown in Figures C and D.

Figure C

Figure D

To add the Emmet extensions to the Dreamweaver menu you have to open the Commands | Emmet Preferences dialog and enter the absolute path to the Emmet extensions folder. This must be manually entered since Dreamweaver doesn’t support a folder-picking dialog as shown in Figure E.

In this case the full path to the Emmet extensions is:

C:\Program Files\Adobe\Adobe Dreamweaver CS5\Plug-Ins\Commands\Emmet

Next, the keyboard shortcut for the key combination [Ctrl]+E needs to be updated. From the Dreamweaver menu go to Edit | Keyboard Shortcuts, and from the Commands: Menu Commands dropdown, open the Insert directory, and choose Tag. Next, you will need to remove the item by clicking on the minus sign for the shortcut to [Ctrl]+E, and then select OK to confirm. The Keyboard Shortcuts dialog box is displayed in Figure F.

Usage

When you are ready to use the Emmet functionality just enter any Emmet abbreviations and follow-up with pressing the key combination of [Ctrl]+E, and then the Emmet tag(s) will be automatically completed. I have provided several examples of HTML and CSS abbreviations for commonly used web development coding and they are displayed below.

HTML

For the HTML 5 doctype on line 1 in Dreamweaver, enter the abbreviation “!” or “html:5” and press [Ctrl]+E.  The resulting HTML5 doctype will appear along with a few tags to start up your document, as shown in Figure G.

Other doctype abbreviations include html:xt for XHTML Transitional doctype, and html:4s for HTML 4 Strict doctype.

Abbreviation syntax includes elements, nesting operators for child and sibling, climb up, multiplication, and grouping. Attribute operators include ID and Class, item numbering, number base, and direction changing. Text can be added using the curly braces {}.

Let’s say you want to combine IDs and Classes into an HTML5 article element; typing the Emmet syntax article#front.main and then [Ctrl]+E results in the following code:

<article id="front" class="main"></article>

How many times have you had to create multiple unordered lists that include about ten items or more and all include anchor linking and text? The Emmet abbreviation syntax #menu$*3>ul>li*10>a{Link Here} and [Ctrl]+E creates the following as displayed in Figure H. The $ operator will increment the menu times three iterations using the multiplication *3 and the list items will be created ten times each with the *10 syntax, including an anchor for each with the text “Link Here”.

Figure H

Nesting operators are used to position syntax abbreviations inside a generated tree, which allows you to build entire pages with just one line of code as in the example shown below: article>p{Text here…}+bq>{Text here…}^p{Text here…}*3 and [Ctrl]+E results in the following code, displayed in Figure I:

    <article>
       <p>Text here...</p>
       <blockquote>Text here...</blockquote>
       <p>Text here...</p>
       <p>Text here...</p>
       <p>Text here...</p>
    </article>

Figure I

Form and form inputs are also included in the abbreviation syntax, just a few included here are shown in the brief simplified table below:

Syntax

Result
form <form action=””></form>
form:get <form action=”” method=”get”></form>
form:post <form action=”” method=”post”></form>
input:t <input type=”text” name=”” id=””>
input:time <input type=”time” name=”” id=””>
input:time#dateTime <input type=”time” name=”” id=”dateTime”>

Want to add a data table quickly? Here are a few of the HTML data table syntax:

Syntax

Result
table+ <table>

<tr>

<td></td>

</tr>

</table>
tr+ <tr>

<td></td>

</tr>
colg+ <colgroup>

<col>

</colgroup>

CSS

Emmet is also useful for abbreviated CSS syntax. I will highlight just a few of the hundreds that are available in the table below, listing some common Emmet syntax abbreviations and the resulting code generated. Many of the Emmet CSS3 syntax are included with the vendor prefixes as part of the resulting code, which I have displayed with the box-shadow and @webkit-keyframes examples.

Syntax

Result
pos position: relative;
pos:s position: static;
t:a top: auto;
z z-index: ;
va:t vertical-align: top;
tsh:ra text-shadow: h v blur rgba(0, 0, 0, .5);
bdtli:c border-top-left-image: continue;
d display: block;
bxsh:ra -webkit-box-shadow: inset h v blur spread rgba(0, 0, 0, .5);

-moz-box-shadow: inset h v blur spread rgba(0, 0, 0, .5);

box-shadow: inset h v blur spread rgba(0, 0, 0, .5);
@kf @-webkit-keyframes identifier {

from {  }

to {  }

}

@-o-keyframes identifier {

from {  }

to {  }

}

@-moz-keyframes identifier {

from {  }

to {  }

}

@keyframes identifier {

from {  }

to {  }

}
c:ra color: rgba(0, 0, 0, .5);
ff:ss font-family: sans-serif;
cps:b caption-side: bottom;
bgi:n background-image: none;
pgbb:r page-break-before: right;

For a complete list of the Emmet syntax abbreviations check out the Emmet Cheat Sheet, available as part of the documentation included on the Emmet website. Once you get the hang of the common Emmet syntax abbreviations you can get well on your way to creating quick coding habits and cut your development time while increasing your productivity. You will be happy, your boss will be happy, and your customers will be happy — a win situation all around!