Emmet offers a toolkit for creating and working with HTML using a CSS style shorthand. Working and creating code for HTML pages can be substantially cut down using the Emmet Toolkit. This toolkit is available for a variety of text editors including Dreamweaver. Check here to view if there is an extension for your favorite text editor.

The Dreamweaver extension can be downloaded from the Emmet website. Once downloaded, simply double click the .zxp file and the Dreamweaver Extension Manager will open and install the extension for you. It can’t be any simpler than that!

Once downloaded, you can begin to code using the Emmet shortcut commands in Code View. An Emmet cheat sheet is available to learn Emmet commands very easily.

Emmet offers the capability to speed up your code creation by typing CSS style code, and Emmet processes that shorthand and creates full HTML coding. The Emmet style of coding allows you to cut down the time it takes to code your pages because you are not having to type the entire code base yourself. Add to that the issue of typing errors, and you can see how typing less code also means correcting less typing errors.

Here is an example. Let’s say we want to add an unordered (bulleted) list to our HTML page. In order for Emmet to process the shorthand code, your cursor must be at the end of the line of code. Then press ctrl/cmd E and Emmet works its magic!

Using Emmet we simply type this:

To create an unordered list with 7 list items using Emmet:

ul>li*7

Place your cursor after the 7 in the code above and use ctrl/cmd E. Emmet creates the following for you:

To create a navigation bar using Emmet:

nav>ul>li*6>a

Place your cursor at the end of the code line and hit ctrl/cmd E:

Emmet outputs the following:

 To add text to the navigation bar as a placeholder for links, add text in curly brackets:

nav>ul>li{link goes here}*6>a

 Emmet can create div tags with classes and ids using the following code:

#footer>p.copyright

Hit ctrl/cmd E and you get the following:

The examples above only touch the surface of what Emmet can do for you. Speed up your coding and become more efficient using Emmet. Learn more about the Emmet Toolkit at Emmet.io.