Emmet to Quickly Create HTML Elements by Caleb Fong

Use emmet for productivity and great justice!

Greetings Allison, and fellow NosillaCast-aways. Caleb, here to talk about another geeky tool. Even if you aren’t ‘stuck in’ on Programming by Stealth you may still find yourself writing HTML for a variety of reasons. You may have also come across the need to generate a large, even small, number of HTML elements.

If you don’t want to type them all by hand, you’ll need some sort of generator. If we jump into the WABAC machine, perhaps you will remember the bad old days of generated code, the days of Microsoft FrontPage or (worse yet) HTML export from MS Word. Thankfully the WABAC can return us to the present where standards have been firmly in place for years and a code generation tool can, indeed, not suck.

Enter in what I call dynamic generation (No ‘dynamic generation’ isn’t a real term, that I know of, it’s just how it makes sense in my head. Although I’m sure it’s used an app library somewhere to mean something specific) which is where the tool emmet shines. The basic thought behind emmet is to have easy to understand abbreviations that can be interpreted into correct markup. Emmet uses a CSS like syntax to define the abbreviation – there are good docs for this. For example, you might want:

• a div with the class “TOC” (Table Of Contents)
• with ten subsections
• you want the subsections to be an unorded list item
• each of the list items is a link with the class name “toc-link-” followed by a number

Here’s what the above ‘requirements’ would be as a one line emmet abbreviation:

div.TOC>ul>li*10>a.toc-link-$

So let’s break this down:

• div.TOC generates <div class="TOC"></div> — This is where emmet is CSS like, because the . notation is for classes; if you want an id you can use #.
• Like in CSS the > (greater than) symbol marks the next element as a child of the previous one
• ul generates <ul></ul>
• >Another child noteation
• li*10 this is where things get more interesting, here we’re saying we want a list item, repeated ten times
• > another child noteation
• a.toc-link-$ generates an <a href="" class="toc-link-[number]" the $ tells emmet to enummerate these items, the default begins at 1.

The HTML output of this is: (I am not reading this outloud since it’s mostly visual)

<div class="TOC">
    <ul>
      <li><a href="" class="toc-link-1"></a></li>
      <li><a href="" class="toc-link-2"></a></li>
      <li><a href="" class="toc-link-3"></a></li>
      <li><a href="" class="toc-link-4"></a></li>
      <li><a href="" class="toc-link-5"></a></li>
      <li><a href="" class="toc-link-6"></a></li>
      <li><a href="" class="toc-link-7"></a></li>
      <li><a href="" class="toc-link-8"></a></li>
      <li><a href="" class="toc-link-9"></a></li>
      <li><a href="" class="toc-link-10"></a></li>
    </ul>
</div>

This all sounds interesting, yes? But where and how does one use such a tool? There are a number of editors that have this baked in, one of them is Visual Studio Code, and it is available as a plugin for many others, there’s a list on the emmet website.

Above was a fairly simple example, emmet can go pretty deep. I recently needed to generate a table template for an icon font set. What I needed was:

• a table with headers:
  • icon (the visual representation)
  • icon name for textual searching and filtering
  • HTML entity code (a decimal number)
  • Unicode code (because it’s useful in cases where the HTML code isn’t available)
• rows for each of these with class names for the cells and a little boilerplate (default un-changing text)
• in this particular case lots of rows, (248 to be exact)

This is the emmet command I came up with:

table>(thead>tr>th*4)+tbody>tr*248>(td.icon+td.icon-name+td.html-code+td.unicode)

• table – fairly self explanatory
• The > is handled just like it is in CSS, it denotes a child relationship to the preceding tag.
• The () are like their maths counterpart, they indicate a group, and are to be processed by emmet as a unit
• The + indicates a sibling relationship, aka the same indentation level as the previous element

So for maybe one or two minutes of testing and thinking I generated in about one second all of the structure I would need for this little project.

These are just two examples, the base emmet syntax is flexible enough to cover much of what you need, and if you need further customization there is a way to generate your own syntax!