Design by Pelling

Archived Blog 

Code HTML Faster with Emmet

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.

!>.container>(ul.nav>.item$*5>lorem1)+h1{Header 1}+h2{Header 2}+h3{Header 3}+(p*3>lorem30)+(table>.row*3>.col*2>{This is a table cell})+(form:post[action=’#’]>inp[type=’text’ name=’name’ id=’name’ placeholder=’Your name’]+textarea[name=’message’ id=’message’]+input:s[value=’Send’])

Wait, what?!

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

P.S. Sergey Chikuyonok, the developer of Emmet actually discourages creating a whole page in one go like this. We’re being a little naughty here so shhh… don’t tell Sergey.

P.P.S. We actually don’t recommend you create such long expressions either. This is for the purpose of demonstration only!

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:

<!-- table>tr>td -->
<table>
<tr>
<td>
</td>
</tr>
</table>

Sibling: +

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

<!-- h1+p -->
<h1></h1>
<p></p>

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:

<!-- h1>span^p -->
<h1><span></span></h1>
<p></p>

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:

<!-- table>tr>td^^p -->
<table>
<tr>
<td></td>
</tr>
</table>
<p></p>

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:

<!-- ul>li*5 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

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:

<!-- table>tr*2>td*3 -->
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

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):

<!--(table>tr>td)*2+(ul>li)-->
<table>
<tr>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
</tr>
</table>
<ul>
<li></li>
</ul>

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}:

<!-- p{Test} or p>{Test} -->
<p>Test</p>

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":

<!-- p#intro.pull-left.padded -->
<p id="intro" class="pull-left padded"></p>

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"]:

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

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:

<!-- 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>

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:

<!-- 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>

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:

<!-- 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>

HTML5 template: !

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

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

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:

<!-- 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>

Notice how Emmet will output the counter with leading zeros when we add multiple $.

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!

Want to hire us? We'd love to hear from you

Pelling have over 50 years combined experience designing and coding websites. We work with companies of all sizes, from one-man bands to multinational blue chip companies. We endeavour to provide high quality service, while maintaining a competitive price.

We pride ourselves in our level of customer service, which we believe is the main reason behind our high customer retention rates.

Contact us