{"id":4098,"date":"2018-06-20T00:00:00","date_gmt":"2018-06-20T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/what-is-emmet\/"},"modified":"2023-07-27T15:15:05","modified_gmt":"2023-07-27T19:15:05","slug":"what-is-emmet","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/what-is-emmet","title":{"rendered":"What Is Emmet?"},"content":{"rendered":"

As companies send more and more email, marketers and designers are on the hunt for tools to help reduce the time between campaign brainstorm and completed send. One of the most time-consuming aspects of email marketing has always been coding and testing campaigns.<\/p>\n

While pre-coded email templates<\/a> can save time during the development process, how can email designers code campaigns more efficiently from scratch?<\/p>\n

One way is to write less code with the help of a tool called Emmet<\/a>.<\/p>\n

What is Emmet?<\/h2>\n

Emmet is a free add-on for your text editor that allows you to type shortcuts that are then expanded into full pieces of code. By using Emmet, email designers type less, saving both keystrokes and time when building a campaign. Also, relying on Emmet\u2019s autocompletion means fewer typos and missing tags, leading to more robust emails.<\/p>\n

Emmet is available for a variety of text editors and is built right into Litmus Builder<\/a>. Popular with web designers, Emmet is also popular among a small set of email developers, particularly Europeans and marketers who code emails from scratch. For instance, 11% of marketers in Europe and the UK and 13% of those that code emails from scratch use Emmet, according to our 2018 State of Email Workflows research<\/a>.<\/p>\n

\"Emmet<\/a><\/figure>\n

Once installed, Emmet allows you to type using abbreviated code that follows the same conventions used in HTML and CSS. Designers can type element names, add ID and class selectors, and take advantage of Emmet\u2019s more advanced functions to speed up the coding process. They can even nest elements using the same child and sibling selectors found in plain CSS to quickly scaffold large blocks of code.<\/p>\n

Using Emmet<\/h2>\n

The easiest way to understand Emmet is by looking at an example. Say you want a table with three rows, each containing a table cell with an image above a paragraph of text and a link.<\/p>\n

\"Our
Our desired structure.<\/figcaption><\/figure>\n

Instead of manually typing\u2014or copying and pasting\u2014each row, table cell, image, paragraph, and link tag, you can condense that down to one line and let Emmet do most of the work for you.<\/p>\n

table>tr*3>td>img+p+a<\/code><\/pre>\n
After hitting the TAB button to trigger Emmet, the one line of code above is expanded into full HTML.<\/p>\n
<table>\n  <tr>\n    <td>\n      <img src=\"\" alt=\"\" \/>\n      <p><\/p>\n      <a rel=\"noopener\" target=\"_blank\" href=\"\"><\/a>\n    <\/td>\n  <\/tr>\n  <tr>\n    <td>\n      <img src=\"\" alt=\"\" \/>\n      <p><\/p>\n      <a rel=\"noopener\" target=\"_blank\" href=\"\"><\/a>\n    <\/td>\n  <\/tr>\n  <tr>\n    <td>\n      <img src=\"\" alt=\"\" \/>\n      <p><\/p>\n      <a rel=\"noopener\" target=\"_blank\" href=\"\"><\/a>\n    <\/td>\n  <\/tr>\n<\/table><\/code><\/pre>\n
That line of code looks intimidating, but once you get familiar with Emmet\u2019s syntax, it becomes second nature. Let\u2019s break it down.<\/p>\n
The line begins with the table element, which tells Emmet that the first element to expand is an HTML table. Using the child selector (>) and multiplication operator (*), we then tell Emmet to include three table rows within the main table.<\/p>\n
Next, we include another child selector to add a table cell into each table row. Within those table cells, we include an image, paragraph, and anchor tag as siblings (+) of each other.<\/p>\n
For email designers, who rely on HTML attributes to ensure consistency across different email applications, you can even include attributes which Emmet will then use in your expanded code. Simply place your attributes and their values within square brackets, separated by spaces. If we wanted to include cellpadding and cellspacing on a table, for example, we would write:<\/p>\n
table[cellpadding=0 cellspacing=0]<\/code><\/pre>\n
Emmet has a ton of useful features, including functions to group items, quickly navigate, remove tags, merge lines, and even add dummy text. While there are far too many features to discuss here, Emmet\u2019s online documentation<\/a> is a great place to learn more.<\/p>\n
There are also a number of fantastic tutorials online. While most focus on using Emmet in the context of web design and development, the same principles can be applied to email design, as well. Here are a few of our favorites:<\/p>\n