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
!orhtml: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:srcexpands to
<script src=""></script>3 : X-UA-Compatible Meta Tag
meta:compatexpands to
<meta http-equiv="X-UA-Compatible" content="IE=7">4 : Meta viwe port tag
meta:vpexpands 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
styleexpands to
<style></style>6 : Linking favicon
link:faviconexpands to
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">7 : Link for RSS
link:rssexpands to
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">8 : Link for atom
link:atomexpands to
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">9 : anchor tag
aexpands to
<a href=""></a>10 : Link with default value
a:linkexpands to
<a href="http://"></a>11 : mail to link
a:mailexpands to
<a href="mailto:"></a>12 : Image
imgexpands to
<img src="" alt="">13 : Form with method get
form:getexpands to
<form action="" method="get"></form>14 : Form with method post
form:postexpands to
<form action="" method="post"></form>15 : Defaullt input
inputexpands to
<input type="text">16 : Input Hidden
input:hiddenexpands to
<input type="hidden" name="">17 : Button
btnexpands to
<button></button>18 : Button Submit
btn:sexpands 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:ie6expands to
<!--[if lte IE 6]>
<![endif]-->22 : Conditional styles for IE
cc:ieexpands to
<!--[if IE]>
<![endif]-->23 : Conditional styles for Non IE Browsers
cc:noieexpands 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-footerThe 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-textThe 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.
Tahir TaousTahir 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.
