Faster Workflow: Mastering Emmet, Part 2

Share this article

In Part 1, we learned about the features of Emmet and how it can make your workflow faster. In this part, we will learn how to install and use Emmet.

Emmet is available for very many text editors, but I will use SublimeText, a very popular and feature rich text editor. If you use another text editor, check the documentation at

Emmet Installation in SublimeText

There are two steps needed to install Emmet in SublimeText. First I will install Package Control for SublimeText and then I will install the Emmet plugin.

Step 1: Install Package Control

With SublimeText Package Control we can easily install new plugins. After installing SublimeText visit to copy code for SublimeText2 or SublimeText3 – whichever version you are using – press ctrl+` or go to View > Show Console. Once open, paste the appropriate code for your version of SublimeText into the console. When installation is complete, restart SublimeText.

Step 2: Install the Emmet Plugin

After restarting SublimeText, go to Preferences > package Control and type install package. In the appearing window, type/search Emmet and select to install it. When installation is finished, Restart SublimeText, so changes can take effect..

Getting Started With Emmet

If you have never used Emmet, you know that writing HTML code takes time. Let’s suppose you create a new HTML file and you need some necessary tags html, head, title, body with HTML5 doctype, like the following:

<!doctype HTML>
<HTML Lang="en">
	<meta charset="UTF-8">

You may have a default template to get started, or perhaps you save code and you just copy and paste code every time. If you are doing this, you are wasting your precious time. With Emmet it will take about two or three seconds to create the above code. Create a new file and save it as .html (e.g. index.html) and type html:5 or ! and press tab, or ctrl+e or any other trigger key in your text editor to expand the abbreviation and you will have HTML5 doctype and a few necessary tags.

In SublimeText Tab is the key used to expand abbreviations. Let’s start with some basics and later we will learn about more advanced examples. Create a new file with SublimeText, save it as emmet.html or index.html. Now type HTML:5 or ! and press Tab and you will have basic HTML code for our page.

Some useful HTML shortcuts

There are so many shortcuts for HTML and CSS, here are some of the most widely used.

1 : Basic markup with HTML5 Doctype

! or html:5

expands to

<!doctype html>
<html lang="en">
	<meta charset="UTF-8">

2 : Script with Source


expands to

<script src=""></script>

3 : X-UA-Compatible Meta Tag


expands to

<meta http-equiv="X-UA-Compatible" content="IE=7">

4 : Meta viwe port tag


expands to

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

5 : CSS Style


expands to


6 : Linking favicon


expands to

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

7 : Link for RSS


expands to

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">

8 : Link for atom


expands to

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">

9 : anchor tag


expands to

<a href=""></a>

10 : Link with default value


expands to

<a href="http://"></a>

11 : mail to link


expands to

<a href="mailto:"></a>

12 : Image


expands to

<img src="" alt="">

13 : Form with method get


expands to

<form action="" method="get"></form>

14 : Form with method post


expands to

<form action="" method="post"></form>

15 : Defaullt input


expands to

<input type="text">

16 : Input Hidden


expands to

<input type="hidden" name="">

17 : Button


expands to


18 : Button Submit


expands to

<button type="submit"></button>

19 : Necessary Table mark up


expands to


20 : Slelect Element


expands to

<select name="" id="">
	<option value=""></option>

21 : Conditional styles for IE6


expands to

<!--[if lte IE 6]>

22 : Conditional styles for IE


expands to

<!--[if IE]>

23 : Conditional styles for Non IE Browsers


expands to

<!--[if !IE]><!-->

Emmet Cheat Sheet

These are just a few tags, used by web developers frequently. You can view a complete list of supported syntax at

CSS Style Sheets

You can easily add default CSS or print style sheets. Just type link for basic link, link:CSS for default style.css file and link:print for print style-sheet. You can override the default attribute values and add new ones. Child elements can also be added as well.

1. Basic CSS link


will transform into following code with tab stops inside empty href="" attribute.

<link rel="stylesheet" href="">

2. Linking default style.css link


will transform into following code

<link rel="stylesheet" href="style.css">	

3. Linking print style sheet


will transform to.

<link rel="stylesheet" href="print.css" media="print">	

4. Overriding default attribute

 link[rel=prefetch title="Hello world"] 

expands to

<link rel="prefetch" href="" title="Hello world">	

5. Adding child elements


expands to

<link rel="stylesheet" href="">

Understanding CSS-like Abbreviations

Abbreviations in Emmet make writing tedious markup code a breeze. Abbreviations are optimized for, but not limited to, HTML and XML generation. The abbreviations’ syntax looks like CSS selectors, so it won’t be difficult for you to learn it, if you are familiar with CSS.

Let’s use abbreviations to create some basic HTML markup for our web page, with header, main and footer section with necessary classes.

Let’s start with a very basic example. just type


and you will see

<header id="site-header"></header>

If you type

header#site-header>h1.logo>a{site name}

and press Tab, it will expand to

<header id="site-header">
	<h1 class="logo"><a href="">site name</a></h1>

Basic Markup for a Page

To create a web page with the basic necessary mark up, type the following code and press tab or Ctrl+E in your editor.


The above abbreviation will generate the following markup. As you can see, we have three sections for our page: first, we have a header with an id of site-header, then we have our main div with the class .container and id main, and then we have a footer section with an id of site-footer. You can apply both ids and classes to any elements, as I have applied to our <div class="container" id="main">

<header id="site-header"></header>

<div class="container" id="main">
	<div class="primary"></div>
	<aside id="sidebar"></aside>

<footer id="site-footer"></footer>

A more complex example: In the above example, I created sections (header, main, primary, aside, footer) for our web page, but now I’m going to add more information and markup in our sections. Emmet is very powerful, and you can generate very complex code. In the following example I am going to create markup for the whole web page. Have a look at it and then I will define it.

(header#site-header>h1.logo>a[href=#]{site name})^div.container#main>(.primary>{post title here}+img.featured-img+p{post text here})+(aside#sidebar>#widget>h2.widget-title+p{widget text})^footer.#site-footer>.col-4.widget*3>h2.widget-title+p.widget-text

The above code will generate following HTML markup:

<header id="site-header">
	<h1 class="logo"><a href="#">site name</a></h1>

<div class="container" id="main">
	<div class="primary">
		<h1 class="post-title">post title here</h1>
		<img src="" alt="" class="featured-img">
		<p>post text here</p>
	<aside id="sidebar">
		<div id="widget">
			<h2 class="widget-title"></h2>
			<p>widget text</p>

<footer class="" id="site-footer">
	<div class="col-4 widget">
		<h2 class="widget-title"></h2>
		<p class="widget-text"></p>
	<div class="col-4 widget">
		<h2 class="widget-title"></h2>
		<p class="widget-text"></p>
	<div class="col-4 widget">
		<h2 class="widget-title"></h2>
		<p class="widget-text"></p>

Now look at the above code carefully and note the functions and symbols I’ve used to generate the above code. I have used parentheses () to group the header section, then I have used ^ to climb up one section, to separate the header and the #main container. To make the above long abbreviation more simple, let’s break it into three parts.

This abbreviation will generate markup for the header section:

(header#site-header>h1.logo>a[href=#]{site name})^

This abbreviation will generate markup for the main section:

div.container#main>(.primary>{post title here}+img.featured-img+p{post text here})+(aside#sidebar>#widget>h2.widget-title+p{widget text})^

This abbreviation will generate markup for the footer section:


You can see I’ve used () and ^ more than once to separate the sections and to generate more complex code.

In Part 3, I’ll cover syntax and functions.

Tahir TaousTahir Taous
View Author

Tahir Taous is founder of Just Learn WordPress, a training site where you can learn how to create and manage websites with WordPress, WordPress essential training, theme development courses free video tutorials and articles.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form