Using Emmet for Faster HTML Coding

Emmet from LEGO movie laughing

No, it’s not about Emmet from the LEGO Movie, but this is still pretty special. In fact, you might even say “everything is awesome.”

What is emmet ?

Emmet (formerly Zen Coding) is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist. The project was started by Vadim Makeev in 2008 and continues to be actively developed by Sergey Chikuyonok and Emmet users. Since 2015 Mikael Geletsyan is responsible for UX at Emmet. The tools have been incorporated into several popular text editors, as well as some plug-ins developed by the Emmet team and others implemented independently. However, Emmet is primarily independent from any text editor, as the engine works directly with text rather than with any particular software. Emmet is open-sourced under the MIT License.

By the way, Emmet was used to be known as Zen Coding, but it got a rebrand. While it’s typically presented as a web development solution, plenty of email developers use Emmet to simplify and speed up their processes.

Emmet is written in pure JavaScript, and it works across platforms, including web browsers, Node.js, Microsoft WSH, and Mozilla Rhino.

How does Emmet work?

Emmet is built on the use of abbreviations or shortcuts, which are special expressions that get parsed and transformed into blocks of code.

i'll give you a simple example to start things out: Type a “p”, hit the Tab key, and Emmet automatically creates an open and closed paragraph tag <p> </p>. To add a child element to the abbreviation for a larger code block, you just use the > symbol (right-angled bracket).

For example, typing body>table>td>tr and hitting Tab would generate:

<body>
 <table>
   <td>
     <tr></tr>
   </td>
 </table>
</body>

There are tons of useful shortcuts in Emmet. Just type an exclamation point (!) and hit Tab to get the code for your HTML doctype. If you want to quickly code elements that are close to each other but not nested within each other, you can just use a plus sign (+). Typing h2+p+ol>li would transform into:

<h2></h2>
<p></p>
<ol>
 <li></li>
</ol>

Cool coding tricks with Emmet

Obviously, coding with Emmet can get a lot more complex than those basic examples.

You can quickly add multiple HTML tags at once. Just use the star or asterisk symbol along with the abbreviation followed by the number and it will multiply the tag that many times.

For example, p*3 would produce three paragraph tags in a row. Typing ul>li*3 and hitting Tab would generate an unordered bullet list with three items:

<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

Developers say this helps them out when they need to add multiple paragraphs to include disclaimer text in UHC emails. But this handy trick could be used in lots of situations, such as email newsletters that have repeating blocks of code.

Using curly brackets with Emmet allows you to add content to HTML tags as you code. As above I used h2{title} to generate <h2>title</h2>. This may not seem like a huge time-saver, but it’s nine keystrokes instead of 14. That’s going to add up, and the better you get at using Emmet the more efficient you’ll become.

You can also use square brackets to add attributes such as alt text for your images. I want you to show us how to add classes and IDs with Emmet shortcuts. There’s even a shortcut for adding lorem ipsum placeholder text with Emmet.

Using code snippets with Emmet and Dreamweaver

This is where Emmet can really help you code faster and more efficiently. Beyond the standard abbreviations, you can build shortcuts for reusable code snippets in your emails. If you’re using an editor that supports snippet libraries (which Dreamweaver and Parcel do), you can customize the Emmet experience for your brand and coding preferences.

After you create a reusable snippet, you can assign a trigger key to that reusable code so you can insert it into your email super-fast. Developers pointed out that you’ll likely want to create unique trigger keys for your snippets because you will overwrite the Emmet abbreviation in Dreamweaver if you don’t.

Developers have reusable snippets that help them easily include things like brand colors and link styling. But you can do it for just about anything you’d rather not type over and over again.

`Here’s some things to try to get you feet wet.`

In the HTML area, try this (remember to hit TAB after):

nav>ul>li*5>a.item-${Item $}

Try this and comment what was the output of this thing ?

Ashish's blog