Emmet Emissary

Reading Time: 4 minutes

Emmet didn’t come naturally to me. My favourite YouTube codey stars and Emmet emissaries use it and without viewing their keyboard strokes I was left eager and still confused. 

What’s Emmet?

I’ll let the Emmet website explain:

“…most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Learning Emmet

I admit some trouble employing Emmet and seemed to miss how to execute it. 

Key Strokes

With thanks to Kevin Powell, I now know Microsoft’s Visual Basic Code (VBC) editor executes emmet strings on Return (Enter) or Tab keys and Adobe’s Dreamweaver uses Tab.

Cheat Sheet

Emmet’s Cheat Sheet helps explain the syntax and concept. The following may help too.

Useful Emmet symbols

Breaking the symbols down made my learning the patterns easier. The following abbreviations apply to the table:

  • el for an element.
  • n for an integer (number)
Basic Emmet Symbols
Shorthand Description HTML Output
loremn Adds the number of lorem words specified by the n integer.
<!--Emmet-->
p{lorem*4}
<!--HTML-->
<p>Lorem ipsum non declosat.</p>
el[attribute=”value”] Square brackets contain attributes and optionally, values where “el” represents an element.
<!--Emmet-->
img[alt="headline"]
<!--HTML-->
<img alt="headline">
el[attribute1=”value” attribute2=”value”] Here we chain attributes and optionally their values within square brackets where “el” represents an element.
<!--Emmet-->
img[alt="headline" width="120" height="40"]
<!--HTML-->
<img alt="headline" width="120" height="40">
el{copy string goes here} Curly brackets specify copy text where “el” represents the element the text is contained by.
<!--Emmet-->
h2{Main Title}
<!--HTML-->
<h2>Main Title</h2>
el-sibling+el-sibling The plus symbol indicates a sibling element follows.
<!--Emmet-->
h2+p
<!--HTML-->
<h2></h2>
<p></p>
el-parent>el-child The “greater than” symbol indicates a child element follows.
<!--Emmet-->
ol>li+li
<!--HTML-->
<ol>
  <li></li>
  <li></li>
</ol>
el*n Where “el” represents the element, we can follow it with an asterisk (or star) to specify how many of that element to create. Here the integer or number is indicated by the n.
<!--Emmet-->
ol>li*4
<!--HTML-->
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>
el^el The caret instructs Emmet to return to the parent’s sibling level. More than one can be used together to indicate higher levels.
<!--Emmet-->
.container>p*2^h3
<!--HTML-->
<div class="container">
<p></p>
<p></p>
</div>
<h3></h3>
el#string A pound sign indicates the following is an id
<!--Emmet-->
h2#main{Headline Two}
<!--HTML-->
<h2 id="main">Headline Two</h2>
el.string A period indicates the following is a class name
<!--Emmet-->
h2.main{Headline Two}
<!--HTML-->
<h2 class="main">Headline Two</h2>
$ The dollar sign indicates a sequential counter.
<!--Emmet-->
p{Paragraph number $}*3
<!--HTML-->
<p>Paragraph number 1</p>
<p>Paragraph number 2</p>
<p>Paragraph number 3</p>

Capabilities

After studying cheat sheets I’m on my way to Emmet competence if you forgive my crazy experiments with what we can chain together. I got excited and created the example in the following figure. Pretty neat, huh?

Page navigation block in Emmet and HTML output

Emmet String

header#header>a.skiplink[href="#main"]{Skip to main content}+div#noscript>p{Please enable JavaScript to enjoy this site's best features}^nav#sitenav[aria-describedby="sitenav-headline"]>h2[aria-hidden="true"]#sitenav-headline.invisible{Headline 2}+ol>(li>a.current[aria-current="page" data-link="0"]>img[alt="Homepage" width="120" height="40"])+li*4>a[data-link="$"]{Page link}

HTML Output

<header id="header">
    <a href="#main" class="skiplink">Skip to main content</a>
    <div id="noscript">
        <p>Please enable JavaScript to enjoy this site's best features</p>
    </div>
    <nav id="sitenav" aria-describedby="sitenav-headline">
        <h2 aria-hidden="true" id="sitenav-headline" class="invisible">Headline 2</h2>
        <ol>
            <li><a href="" class="current" aria-current="page" data-link="0"><img src="" alt="Homepage" width="120" height="40"></a></li>
            <li><a href="" data-link="1">Page link</a></li>
            <li><a href="" data-link="2">Page link</a></li>
            <li><a href="" data-link="3">Page link</a></li>
            <li><a href="" data-link="4">Page link</a></li>
        </ol>
    </nav>
</header>

Keyboard Shortcut

When you have pressed Tab and your HTML displays, your cursor will default to the snippet’s first empty attribute ready to start typing. Press Tab again and the cursor skips to the next empty attribute. I find this useful when I remember to do it: my mouse-hand has over 25 years’ of learning to undo. 

Snippets and Emmet

As a newbie, my opinion is that Emmet is less effort to use for everyday code blocks than locating and importing snippets from the Dreamweaver snippet library. I still like to ‘craft’ my HTML by hand and illogically finding and inserting snippets can feel like more work.

As the Emmet website claims, it is also useful for crafting contextual code. Once I get the hang of adding copy text, attributes, and values I am sure I’ll be hooked.

There remains space for snippets—those less commonly used template blocks where thinking through the Emmet shorthand on the fly can take longer than typing out the vanilla HTML or inserting a snippet of Emmet.

Pick the battles you can win.

Example Emmet Snippets

We can store Emmet snippets to extend and support our learning as easily as we can HTML snippets.

Paragraph with abbreviation

<!--Emmet-->
p{This is how we add an}>abbr[title="abbreviation"]{abbr}+{ within a paragraph.}

<!--HTML-->
<p>This is how we add an<abbr title="abbreviation">abbr</abbr> within a paragraph.</p>

Figure With Table

<!--Emmet-->
fig>figc{Example Table}+table>thead>th*3^tbody+tr*3>td*3

<!--HTML-->
<figure>
    <figcaption>Example Table</figcaption>
    <table>
        <thead>
            <th></th>
            <th></th>
            <th></th>
        </thead>
        <tbody></tbody>
        <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>
</figure>

Emmet CSS? Yes!

Yes. There’s Emmet for CSS, too. That’s cool and so many shortcodes to learn. We can chain CSS Emmet codes together and it quickly gets complicated and confused. Here’s where CSS snippets may well beat Emmet?

Any Tips?

Yes. Don’t panic when your Emmet-induced HTML throws a validation error!

We can add element attributes and values such as ARIA, classes, ids, and data, and not URLs. These and other empty attributes will validate as errors. That’s no bad thing.

Add your own tip and trick in the comments.

 

Leave a Reply

Your email address will not be published. Required fields are marked *