Emmet is a free plug in for popular code editors, which helps you to write HTML and CSS code very quickly. Emmet is available for almost all popular code editors. In this article you will learn how to install and use Emmet in SUblimeText and Brackets code Editor.
If you don’t have installed Brackets or SublimeText, go and download these code editors.
How to install Emmet in Brackets
When you will start Brackets code editor for the first time you will see following screen. A default index.html file with Getting Started with brackets title.This is a good resource to learn about HTML tags. You can see lot of HTML tags in action in this file.
Click on Extension Manager icon on the top right side. The first one icon Live Preview icon, if you will click on Live Preview icon, your current active HTML file will open in Chrome browser. With Live preview feature you can edit HTML in Brackets and see live changes in Chrome browser.
Open Extension Manager and type Emmet in search box. Click on install Button to install Emmet. When installation is complete, create a new HTML file or open your existing index.html file Brackets.
Delete all the HTML code from index.html file. type
! and hit TAB key to expand abbreviation. Exclamation sign
! is basic Emmet abbreviation to create basic mark for HTML document.
If you can see the basic mark up when you type
! and hit tab, it means you have successfully installed Emmet extension in Brackets.
We will learn more about Emmet later now lets see how to install Emmet in SublimeText.
how to install Emmet in SublimeTex
Installing Emmet in SublimeText is a little long process. First you will have to install Package Manager for SublimeText. Installing Package Manager is easy you need to download code from SublimeText package manager page and paste this code in SublimeText.
Code is different for SublimeText version 2 and 3. Copy code for your version start SublimeText and press Ctrl + ` or go to View > Show Console. You will see a an input field at the bottom of SublimeText. Paste code here hit Enter to complete installation of Package Manager.
When installation is complete, restart SublimeText. After restarting SublimeText go to Preferences > package Control select Install package. Search and install Emmet. After successful installation you will see success page.
You might need to restart SublimeText again after installing Emmet. Now open index.html file or you can drag and drop your HTML project folder in SublimeText as well. You will see all files in SublimeText sidebar.
Open index.html file type
! and hit tab to expand. You should see basic HTML mark up for HTML Document. Now change title of your HTML page to something appropriate.
Getting Started with Emmet
Using Emmet to write HTML and CSS code is easy. You just need to use some symbols. With Emmet you have to write small and simple line of code, known as Emmet Abreviation and than hit tab to expand your abbreviation.
If you will type abbreviation correctly, Emmet will generate complete HTML or CSS mark up for you. Emmet abbreviation can be either short and simple or long and complex. Believe it or not even you can generate mark up for complete multi cloumn complex HTML web page with single Emmet abbreviation.
Tab is trigger key in most code editors (e.g. SublimeText and Brackets) to expand Emmet abbreviation. You don’t need to write complete HTML tags when using Emmet. just type h1 and hit tab Emmet will generate
<h1></h1> for you.
Simply type any HTML tag name (e.g h2, h3, h4, p, nav, main. aside etc) and hit Tab to expand.
HTML Mark up for head section with Emmet
There are many simple emmet abbreviations available to generate mark up for head section. You can create mark up for CSS links, atom, rss feed or scripts.
In screenshot below you can see Emmet abbreviations and generated HTML mark up.
In white color you can see Emmet abbreviations and below each abbreviation you can see the HTML mark up that these Emmet abbreviations will generate. This is really quick and easy way to generate HTML mark up.
You don’t need to remember all the HTML mark up to type HTML every time you create a new HTML document.
Emmet uses many symbols that helps you to write either simple or complex abbreviations. Here are some most essentials Emmet symbols.
. period symbol is used to generate classes.
.container div.wrapper.success header.siteHeader
<div class="container"></div> <div class="wrapper success"></div> <header class="siteHeader"></header>
# symbol is used to generate div with IDs.
#container div#wrapper.success header#siteHeader
HTML Mark up
<div id="container"></div> <div id="wrapper" class="sucsess"></div> <header id="siteHeader"></header>
+ sign is used to create sibling elements
HTML Mark up
<header></header> <div class="main-container"></div> <footer></footer>
> greater than symbol is used to generate child items.
HTML Mark up
<header> <nav></nav> </header> <header> <nav> <ul> <li></li> </ul> </nav> </header>
^ Caret symbol is used to generate sibling items
header>nav^main>article^footer or header>nav>ul^^main>article+aside^footer
HTML mark up
<header> <nav></nav> </header> <main> <article></article> </main> <footer></footer>or <header> <nav> <ul></ul> </nav> </header> <main> <article></article> <aside></aside> </main> <footer></footer>
() symbols used for grouping.
Example Emmet abbreviation:
HTML Mark up
<header> <nav></nav> </header> <main> <article></article> </main> <footer></footer>
* symbol is used for multiplication
<li></li> <li></li> <li></li>
<header> <nav> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </nav> </header>
Emmet for links
Emmet for links
a a:link a:link[title=""] a[href="http://google.com"] a[href="http://google.com" title="visit google.com"]
HTML Mark up
<a href=""></a> <a href="http://"></a> <a href="http://" title=""></a> <a href="http://google.com"></a> <a href="http://google.com" title="visit google.com"></a>
as you can in above example, i have used  symbols to provide default values.
I hope now you understand how to use Emmet to generate HTML mark up quickly and easily. I have tried to explain everything with simple examples. Just install Emmet and try all above examples yourself. Practice makes a men perfect so go ahead and master Emmmet.
Here is a list of other resources to learn and master Emmet.
Faster Workflow: Mastering Emmet, 4 Part series by Tahir Taous
Write HTML and CSS Faster With Emmet by Thoriq Firdaus on Hongkiat
7 Awesome Emmet HTML Time-Saving Tips by Joshua Johnson on designshack
Sublime Text for Front End Developers on CSSTricks
Faster HTML and CSS workflow with Emmet + Bootstrap Free Udemy video course
If you have any question, feel free to ask in comments.