Faster Workflow: Mastering Emmet, Part 2

Tweet
This entry is part 2 of 4 in the series Faster Workflow: Mastering Emmet

Faster Workflow: Mastering Emmet

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 http://emmet.io/download/.

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 https://sublime.wbond.net/installation 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">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</HTML>

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">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

2 : Script with Source

script:src

expands to

<script src=""></script>

3 : X-UA-Compatible Meta Tag

meta:compat

expands to

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

4 : Meta viwe port tag

meta:vp

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

style

expands to

<style></style>

6 : Linking favicon

link:favicon

expands to

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

7 : Link for RSS

link:rss

expands to

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

8 : Link for atom

link:atom

expands to

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

9 : anchor tag

a

expands to

<a href=""></a>

10 : Link with default value

a:link

expands to

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

11 : mail to link

a:mail

expands to

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

12 : Image

img

expands to

<img src="" alt="">

13 : Form with method get

form:get

expands to

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

14 : Form with method post

form:post

expands to

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

15 : Defaullt input

input

expands to

<input type="text">

16 : Input Hidden

input:hidden

expands to

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

17 : Button

btn

expands to

<button></button>

18 : Button Submit

btn:s

expands to

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

19 : Necessary Table mark up

table+

expands to

<table>
	<tr>
		<td></td>
	</tr>
</table>

20 : Slelect Element

select+

expands to

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

21 : Conditional styles for IE6

cc:ie6

expands to

<!--[if lte IE 6]>
	
<![endif]-->

22 : Conditional styles for IE

cc:ie

expands to

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

23 : Conditional styles for Non IE Browsers

cc:noie

expands to

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

Emmet Cheat Sheet

These are just a few tags, used by web developers frequently. You can view a complete list of supported syntax at http://docs.emmet.io/cheat-sheet/.

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

Link 

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

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

2. Linking default style.css link

Link:css 

will transform into following code

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

3. Linking print style sheet

Link:print 

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

link>xsl:apply-templates 

expands to

<link rel="stylesheet" href="">
	<xsl:apply-templates></xsl:apply-templates>
</link>

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

header#site-header	

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>
</header>

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.

header#site-header^div.container#main>.primary+aside#sidebar^footer#site-footer

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>
</div>

<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>h1.post-title{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>
</header>

<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>
	</div>
	<aside id="sidebar">
		<div id="widget">
			<h2 class="widget-title"></h2>
			<p>widget text</p>
		</div>
	</aside>
</div>

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

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>h1.post-title{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:

footer.#site-footer>.col-4.widget*3>h2.widget-title+p.widget-text

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.

Faster Workflow: Mastering Emmet

<< Faster Workflow: Mastering Emmet, Part 1Faster Workflow: Mastering Emmet, Part 3 >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • RadneyAaronAlquiza

    Web development on Netbeans 7.4 works well with Emmet

  • http://twitter.com/digideth digideth

    Did you forget to proof this post before you published it?

    You have a duplicate entry for “22 : Conditional styles for IE” & this one “4. Overriding default attribute” looks like you put the result as the shortcut….. fix please!

    Thank you for the tutorial series on Emmet.

    • http://sitepoint.com/ Ricky Onsman

      Fixed.

  • jhapik

    Shortcut #23 is cc:noie

    • http://www.bitfalls.com/ Bruno Skvorc

      Thank you! Fixed

      • http://wordpressinurdu.com/ Tahir Taous

        Thank you Jhapik and Bruno.