Code HTML Faster with Emmet

There are many ways of speeding up the coding process, whether it’s by using a CSS pre-processor such as Less or Sass, or by using PHP frameworks such as Laravel, Phalcon or Symfony.

Today I’d like to introduce you to Emmet. Emmet is a plugin for text editors that helps you significantly speed up the rate at which you code HTML & CSS. It’ll take a little time to get used to at first, but you’ll notice the potential as soon as you start trying it out!

Although it’s not essential, it’s good to have a good understanding of HTML and CSS before proceeding with this tutorial as Emmet has CSS-like syntax.

Installation

Emmet supports a wide range of text editors, each with installation instructions. Ideally you want to use a text editor that supports tabstops (such as Sublime Text) as it’ll facilitate the use of Emmet. Click here to view the download page.

Getting started

Now that you’ve got Emmet installed in your text editor let’s get started by looking at an example of what Emmet can actually do!

Below you’ll find an online text editor with some Emmet code. Try putting the text cursor at the end of the line and pressing tab.

Wait, what?!

Yes, you just finished coding a simple web page with a single line of code! Isn’t that awesome?

Since you have Emmet installed in your text editor, try opening a new document, copy & pasting the code above and pressing tab. Notice that it actually won’t do anything? This is because a file must be saved with an .html or .css extension prior to Emmet activating. This is so that Emmet can correctly identify what language you are coding.

Breaking it down

We used quite a few Emmet abbreviations in the code above. Let’s go through the key concepts below:

Elements

In Emmet, you can generate an element by typing the name of it and pressing tab. For example, if you type div and press tab, Emmet will expand that into <div></div>. There’s no pre-defined list of elements, so you can technically type foo and generate <foo></foo>.

Child: >

The > operator can be used to create a child element. For example the table>tr>td syntax will generated the following HTML code:

[code lang=”html”]
<!– table>tr>td –>

<table>
<tr>
<td>
</td>
</tr>
</table>
[/code]

Sibling: +

The + operator is used when creating a sibling element. For example the syntax h1+p will generate:

[code lang=”html”]
<!– h1+p –>

<h1></h1>
<p></p>
[/code]

Climb-up: ^

The ^ can be used to traverse up a level. For example h1>span^p will create a span inside a h1, then traverse up a level before generating the p, like so:

[code lang=”html”]
<!– h1>span^p –>

<h1><span></span></h1>
<p></p>
[/code]

It’s worth noting that ^ can be used multiple times in a row to traverse more than 1 level. E.g. table>tr>td^^p would generate:

[code lang=”html”]
<!– table>tr>td^^p –>

<table>
<tr>
<td></td>
</tr>
</table>
<p></p>
[/code]

Multiplication: *

With the * operator, you can define how many times a particular element should be outputted. You can for example create an unordered list with 5 list items using ul>li*5:

[code lang=”html”]
<!– ul>li*5 –>

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
[/code]

A slightly more complex example of usage would be creating a table with 2 rows, each with 3 cells. This can be done with the expression table>tr*2>td*3:

[code lang=”html”]
<!– table>tr*2>td*3 –>

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
[/code]

Grouping: ()

Grouping can be used to group expressions together. This is useful as it reduces the amount of traversing you need to do, as well as allowing us to use multiplication. The syntax for the grouping operator is simple, i.e. just wrap the expression within brackets.

For example, if I wanted to create 2 tables followed by an unordered list, I could use (table>tr>td)*2+(ul>li):

[code lang=”html”]
<!–(table>tr>td)*2+(ul>li)–>

<table>
<tr>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
</tr>
</table>
<ul>
<li></li>
</ul>
[/code]

Text: {}

The {} allows you to add text to an element. For example, let’s say we want a paragraph with the text “Test”. We can in fact do this in 2 different ways, either p{Test} or p>{Test}:

[code lang=”html”]
<!– p{Test} or p>{Test} –>

<p>Test</p>
[/code]

Adding IDs and classes

You can easily add IDs and classes to elements by using CSS like syntax.  For example p#intro.pull-left.padded would generate a paragraph element with id="intro" and class="pull-left padded":

[code lang=”html”]
<!– p#intro.pull-left.padded –>

<p id="intro" class="pull-left padded"></p>
[/code]

Attributes: []

Another thing you will need to do is set the attributes of an element, which can be done using the square brackets. Anything between the square brackets will be added to the element as an attribute. For example a link to Google can be generated by using a[href="http://google.com"]:

[code lang=”html”]
<!– a[href="http://google.com"] –>

<a href="http://google.com"></a>
[/code]

You can also set multiple attributes by separating the attributes with a space, much like you would in normal HTML. If the attribute doesn’t exist in the snippet Emmet outputs, it’ll add it in:

[code lang=”html”]
<!– a[href="http://google.com" data-example="Here’s an example data attribute"] –>

<a href="http://google.com" data-example="Here’s an example data attribute"></a>
[/code]

Implicit tag names

Considering the fact Emmet is meant to speed things up, you may be thinking that typing the child element in certain cases is unnecessary, e.g. ul>li.list-item or table>tr.row>td.col.

Well Emmet actually has implicit tag names, where it’ll look at the parent context to work out what the most suitable child element should be. Check it out:

[code lang=”html”]
<!– ul>.list-item –>

<ul>
<li class="list-item"></li>
</ul>

<!– table>.row>.col –>
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>

<!– .wrapper –>
<div class="wrapper"></div>
[/code]

Lorem Ipsum: lorem

When creating a test site, more often that not you’ll populate it with lorem ipsum. For me this has always been a case of visiting lipsum.com and copy & pasting the text across. Sure, it doesn’t take too long, but when you have to do it multiple times it does become a bit of a hassle.

Fortunately Emmet has you covered once again, as it has an in-build lorem ipsum generator. By using the lorem (or lipsum) abbreviation, you can generate 30 words of lorem ipsum.

Need less/more? No problem. Just type the number of words you’d like afterwards! For example lorem20 would generate lorem ipsum that’s 20 words long.

You can even use it in conjunction with multiplications to create differing text. For example to generate 3 paragraphs of lorem ipsum you can use p*3>lorem:

[code lang=”html”]
<!– p*3>lorem –>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis, tenetur beatae iusto quod est nulla quis corporis optio voluptate consequuntur unde eius omnis dolor nostrum in dolore fuga reiciendis.</p>

<p>Iure, velit alias quae natus incidunt quo ut excepturi officia. Asperiores, quod dolorem assumenda eius pariatur ab laborum voluptate molestiae saepe numquam. Optio, expedita repellendus consequuntur quo quisquam itaque quam.</p>

<p>Quibusdam, minima, vel, placeat et officiis non cum reiciendis error voluptatum explicabo delectus obcaecati repellat voluptate nam accusamus corporis impedit possimus nemo. Fugit, pariatur, quidem molestiae beatae veniam perferendis suscipit!</p>
[/code]

HTML5 template: !

This is another handy little abbreviation Emmet has. Using ! we can quickly generate the snippet below:

[code class=”inline”]
<!– ! –>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
[/code]

Item numbering: $

Now that we’ve covered multiplication, IDs, classes and text, there’s a cool little trick I want to show you.

During the creation of elements within a multiplication, we can in fact use $ to output the current iteration count. This is useful for example, if you need to a unique class name for each element. Let me clarify using the examples below:

[code lang=”html”]
<!– ul>li*3>{This is list item $} –>
<ul>
<li>This is list item 1</li>
<li>This is list item 2</li>
<li>This is list item 3</li>
</ul>

<!– ul>.list-item-$*3 –>
<ul>
<li class="list-item-1"></li>
<li class="list-item-2"></li>
<li class="list-item-3"></li>
</ul>

<!– ul>.list-item-$$$*3 –>
<ul>
<li class="list-item-001"></li>
<li class="list-item-002"></li>
<li class="list-item-003"></li>
</ul>
[/code]

Conclusion

Phew! We’ve covered quite a few things on Emmet here. Hopefully it’s given you enough of a taster to see how powerful Emmet is, so that you’re eager to learn more.

There is in fact more to Emmet than just HTML; it can generate CSS too! We’ll be discussing that in a future tutorial, but no doubt you’ll be an expert in Emmet by then!

Please feel free to post your comments/constructive criticisms below, and be sure to check out the Emmet cheat sheet!