How to install Emmet in SublimeText 2 3 & Brackets + Cheat Sheet

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.

Download SublimeText code editor
Download free brackets free code editor

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.

install emmet in brackets

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.

download code for SublimeText package control

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 symbols

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

HTML Markup

<div class="container"></div>
<div class="wrapper success"></div>
<header class="siteHeader"></header>

# symbol is used to generate div with IDs.

Emmet Abbreviation

#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

Emmet Abbreviation

header+.main-container+footer

HTML Mark up

<header></header>
<div class="main-container"></div>
<footer></footer>

> greater than symbol is used to generate child items.

header>nav

header>nav>ul>li

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:

(header>nav)(main>article)(footer)

HTML Mark up

<header>
    <nav></nav>
</header>
<main>
    <article></article>
</main>
<footer></footer>

* symbol is used for multiplication

Emmet Abbreviation

li*3

<li></li>
<li></li>
<li></li>

header>nav>ul>li*3>a

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