Emmet — Modern layout fundamentals

If you're working with the Visual Studio Code editor, the Emmet plugin will already be installed in the editor. In the last lesson, you also got to see how it works when creating the basic structure of an HTML document. If you're using another editor, you can install Emmet using any of the available instructions. This plug-in is so popular that you can probably find instructions on how to install it on a coffee grinder if need be.

What is Emmet and why is it necessary? Let's try to mark up an imaginary online store product card. What might we need? The framing block, the name of the product, a picture, the block with the product's price, and an "Order" button. It doesn't seem like much. Let's add a card and place it inside the section with the cards class. Let's try to convert this to HTML. We get roughly the following structure:

<section class="cards">
  <article class="card">
    <div class="card-title">Item Title</div>
    <img src="/images/card-item-1.png" alt="Item-1">
    <div class="card-price"><span class="price-sum">300</span><span class="price-cur">USD</span></div>
    <button>Buy</button>
  </article>
</section>

This isn't the most complicated markup, but it has quite a few different elements. Try to repeat this layout yourself, and you'll see that it is quite time-consuming, although we knew in advance what elements would be needed and imagined it in our heads. It turns out that instead of wrapping the other elements, we just entered the correct characters and tried to make sure that all the block elements would be closed.

Of course, this example was only one line. It may seem scary at first, but by the end of the lesson you'll understand every symbol in it. The line looks like this:

section.cards>article.card>div.card-title{Item Tiitle}+img[src="/images/card-item-1.png"][alt="Item-1"]+(.card-price>span.price-sum{300}+span.price-cur{USD})+button{Buy}

This is where the Emmet plugin comes into play. It takes that string and converts it to the HTML you saw above. There are two ways that the plugin can convert the string to HTML.

1. At the very end of the string, Visual Studio Code itself will prompt you to convert it. All you have to do is press Enter when there's a tooltip on the screen

1. Select the entire line and press Ctrl + Shift + P. In the pop-up window, start typing >Emmet: Expand Abbreviation and select this item

189 characters vs. 335. A serious result. And that distinction will only grow depending on how large you want the layout to be. It's fine even if you have 500 symbols, using Emmet, you'll get the structure of the entire page. Emmet is a powerful tool that allows you to accelerate the markup of HTML code. The plugin allows you to remove most of the routine activities that make you want to fall asleep. Let's go from the beginning of the line and break down what's going on here:

• section.cards is very similar to a CSS selector, and that's how you should look at it. We want to create a section element with the class cards
• > - like in CSS, this symbol means nesting. In the current value, the entry section.cards> means that everything listed below will be located inside the section with the cards class
• article.card - creating an <article> element with the card class
• div.card-title - creating a block element with the card-title class. Here's the cheeky part, you don't have to specify the <div> element directly to create it. If no tag is specified before the class, Emmet will create a <div> element by default. I.e., you can give .card-title instead of div.card-title
• {Item Title} - the curly brackets indicate the plain text that will be placed inside the block
• + - addition symbol means that the right part should be placed next to the left part, and not inside it, as is the case of the > symbol. We want to put the picture next to the .card-title block, not inside it
• img[src="/images/card-item-1.png"][alt="Item-1"] - creating an img element. Square brackets indicate the attributes we want to add. In this case, it's the src attribute, whose value is the path to the image, and the second attribute, alt, responsible for the meta-data about our image. Attributes can be recorded individually or together. If we give this entry img[src="/images/card-item-1.png" alt="Item-1"], the result will be the same
• () - brackets allow you to group information. In this case, we want everything inside the brackets to be next to the picture created in the previous paragraph

Everything that happens next, you'll already know thanks to the previous paragraphs. As you can see, Emmet is quite an interesting tool. And it's not as complicated as it may seem at first. Here are some more examples of different strings and conversion results using Emmet:

header>.logo+nav>ul>li*3

<header>
  <div class="logo"></div>
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
</header>

Note the construction *3 - this is literally multiplication. We want to take an element and mark it up three times.

table>tr*3>td*3

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

Creating tables has never been so easy :)

header+main+footer

<header></header>
<main></main>
<footer></footer>

And here's an easy way to add basic tags to your page.

div.item-$*3

<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>

The $ symbol in Emmet is a counter. When you expand this string, all the $ characters will be replaced by numbers, starting from one and incrementing by 1. There are several additional constructions that allow you to expand this counter:

• The number of $ symbols will be the number of digits in the counter. For example, div.item-$$$*3 will start the counter not just with zero, but with three zeros. The first element in this case is <div class="item-001"></div>
• The counter can start with any number. This uses the @ symbol followed by the initial number. For example, div.item-$@5*3 will start the counter with the number five. The first element will be <div class="item-5"></div>

These are basic things that will help you cut down the time you spend writing markup. Emmet a very powerful tune, but it will last you a long time. In addition, it knows how to work with CSS. You need it more for writing abbreviations You can try creating any CSS file and start typing in the properties. Anything that Visual Studio Code will offer you works with Emmet as well.

Do it yourself

Try reproducing the following layout with Emmet. Your task is to make a line using an existing layout, like with the product car from this lesson.

<main>
  <h1>Emmet</h1>
  <ul>
    <li>Quick</li>
    <li>Comfortable</li>
    <li>Fabulous wallpaper</li>
  </ul>
  <p>Emmet helps me design layouts faster</p>
  <p>Emmet helps me design layouts faster</p>
  <p>Emmet helps me design layouts faster</p>
  <p>Emmet helps me design layouts faster</p>
  <p>Emmet helps me design layouts faster</p>
  <p>Emmet helps me design layouts faster</p>
  <p>Emmet helps me design layouts faster</p>
  <p>Emmet helps me design layouts faster</p>
  <p>Emmet helps me design layouts faster</p>
  <p>Emmet helps me design layouts faster</p>
</main>

Recommended materials

1. Emmet Cheat Sheet