Emmetism (n.):

A new religion for the modern era

(+ a beginner’s guide to Emmet shortcuts)

Chapter 1: Life Before Emmet (Typety-Type-Type)

Having spent the last 10 years of my life in Academia and Academic Publishing I moved to Toronto in May looking for a new challenge and hoping to kickstart a change of career with some super-fly new hard skills in Tech and Design.

This led me to Hackeryou. I started on the Design course which I loved and after grappling with Illustrator for 3 months I was hooked and eager to start learning how to move designs into the real/electronic world. I decided to apply for the full-time Front-End Development bootcamp.

I started out with absolutely no idea how to code anything so turned to the great universal mother Google for advice on how to complete the pre-coursework. I started working on Treehouse and for two weeks my dreams were filled with matrix style coding gibberish and my fingers worn down to nubs.

Determined to clear a path through the fog of p-tags, curly braces and exasperated comments that littered my poor sickly code I took an Introductory course at Hackeryou for a few weeks and was introduced to the idea of DRY and WET code:

DRY: Don’t Repeat Yourself

WET: We Enjoy Typing

and the reality of my situation captured by the catchy acronym below…

IDWTTABIDKHTS: I Don’t Want To Type Anymore But I Don’t Know How To Stop:(

(this may need some work before it goes viral)

Chapter 2: Life after Emmet: (a whole new world)

Imagine my delight when in my first week of bootcamp I learned that Emmet can do more that just rustle up a quick p-tag! On day one I witnessed the miracle of “.wrapper + tab” and choirs of angels emerged bugling from the clouds.

But the problem with shortcuts is that it’s easy to learn a couple, incorporate them into your coding routine and then totally forget about them when you get distracted by bigger shiner things. (change the case of text in MS Word anyone?… Shift+F3)

I realised it was time to take the plunge and get intimate with Emmet…

Chapter 3: Finally getting down and dirty with Emmet shortcuts

Here are some of the shortcuts I have found most useful in my brief time Subliming…

Shortcut + TAB:

Create Siblings: +


Create Multiple elements: *x


Add sequential numbering: $

<li class=”item1"></li>
<li class=”item2"></li>
<li class=”item3"></li>
<li class=”item4"></li>
<li class=”item5"></li>

Create an element with an ID: #id

(Note that #id creates a div element by default. When another element is required you need to specify the element before #id)

<div id=”header”></div>
<p id="title"></p>

Create an element with a CLASS/CLASSES: .class

Note that .class creates a div element by default. When another element is required specify the element before .class

<div class=”title”></div>
<p class="title"></p>
<p class=”class1 class2 class3"></p>

Create an element with both a CLASS and an ID: element#ID.class

<p id=”search” class=”wide”></p>

Create children: >


Implied child type:

Certain elements have an implied child type associated with them (e.g. ul>li) meaning you do not have to specify the child type in the shortcut:

<li class="implied-child"></li>

And don’t forget…

CTRL/CMD + LEFT CLICK to input multiple cursors!

Further info:

If you want to really nerd out you can access the full cheat-sheet on the Emmet site here.

You can also learn how to customize Emmet here.