emmet HTML 5 document

How to install and use Emmet for Sublime Text 2 (or any other code editor)

Trying to figure out how coders can code at high-speed but they wont share their secrets with you? Then they are probably using the Emmet plugin. In this quick guide I will explain you how you can install and use Emmet plugin.

Install and use Emmet

Installing plugins for Sublime Text 2 can be tricky. Use the guide below on how to install it. Already have it installed? Then skip to the ‘how to use Emmet‘ section.

How to Install
Step 1:

We want to open the console to enable installations of packages. To open the console click: View – Open Console or use the shortcut: CTRL + ´
Now that your console is open, you paste the following code and press enter.

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

And after installation restart Sublime Text 2.

Step 2:

The next thing we want to do is open the command palette. For this you use the shortcut: CTRL + SHIFT + P
and type: install package and press Enter.

Now we can install packages, since we want to install Emmet, you simply type Emmet and you select: Emmet (ex-Zen coding) for Sublime Text package.

And that’s it. After selecting the package, Emmet will install and you’ll get a notification after it’s done.

How to use Emmet

First of all, start with creating a new document and save it for example as: index.html
Now let’s get started!

We start with HTML 5,
To do this, you type html:5 and press TAB
You can also easily add the CSS link rel by typing: link:css and pressing TAB
Also try: link:favicon , link:rss or script:src

emmet HTML 5 document

This part alone already saved you some time, didn’t it?

You can also type: a and press TAB this will show as:

<a href=""></a>


Also try: a:mail

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

And if you type a{Name here} it will show you:

<a href="">Name here</a>

You can use this for many other attributes.
You can also give a class or id such as: header.logo or header#logo

Emmet example a, img, header

Now that you’ve tried this, we can try to combine things. Try: header>h1.logo>a{Name here}

Simple right? But we’re not done yet!
Let’s try to make 5 list items, simply type the following: ul>li*5

Emmet make 5 list items

> Is used to nest elements inside each other. You can use > multiple times. It’s very useful to create navigation menus and lists. Try nav>ul>li>a this will result in:

<nav>
    <ul>
        <li><a href=""></a></li>
    </ul>
</nav>

You can even generate dummy text with Emmet. Try this: p*2>Lorem
It will generate two paragraphs with dummy text.

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, illum ut temporibus vitae quidem laboriosam earum quisquam officia maxime officiis quibusdam! Laboriosam necessitatibus eos provident illum vero voluptates? Molestiae, quia!</p>
<p>Hic perferendis dolorum sit ut consequatur odio amet, eius, explicabo sint eos et soluta harum doloribus quam illo voluptas voluptatem, quibusdam fuga. Deleniti sequi minus pariatur, commodi voluptas consequuntur quidem!</p>

Also try to generate only 10 words or 50 words, therefore use: p>Lorem10 or p>Lorem50

Now you have the ability to set up your code in no-time! Eager to learn more? Check out the documentation on Emmet.io.

Emmet Quick site

You might like this too!

23 Comments

  • Nice post. I learn something new and challenging on websites I stumbleupon every day.

    It’s always helpful to read through content from other authors and use a
    little something from their websites.

    Reply
  • Hi there, I want to subscribe for this website to obtain newest updates, therefore where can i do it please assist.

    Reply
  • Do you mind if I quote a few of your posts as long as I provide credit and sources back to your website?
    My blog is in the very same niche as yours and my visitors would really benefit from a lot of the information you provide here.
    Please let me know if this okay with you. Thanks!

    Reply
  • Lovely just what I was searching for. Thanks to the author
    for taking his clock time on this one.

    Reply
  • I like what you guys are up too. Such intelligent work and reporting!
    Carry on the superb works guys I’ve incorporated you guys to my
    blogroll. I think it’ll improve the value of my web site :
    ).

    Reply
  • Right here is the right blog for everyone who really wants to
    understand this topic. You understand a whole lot its almost tough to argue with you (not that I personally would want to?HaHa).

    You certainly put a new spin on a subject that has been written about for ages.
    Excellent stuff, just wonderful!

    Reply
  • Hello! This post could not be written any better!
    Reading this post reminds me of my good old room mate!

    He always kept talking about this. I will forward this post to
    him. Pretty sure he will have a good read.

    Many thanks for sharing!

    Reply
  • Pingback: Tracy Smith
    • Hi there,
      I just tried it, and you’re right, It’s not in the list. That is pretty strange. Maybe this is just temporary,..
      But, maybe this could help you: https://github.com/sergeche/emmet-sublime#readme

      You could try to install it manually. Let me know if you don’t understand how to.

      OR!

      You can try another code editor called Brackets. This is my new favorite code editor. You should give it a try. To install Emmet on this editor, go to: File > Extention Manager > and search for “Emmet”

      Hope this helps!
      Let me know 😉

      Reply
  • can somebody please guide me how to restart the sublime text 2..as i am unable to do hence unable to install emmet successfully

    Reply
  • Thank you Hoolite for this tutorial. I was struggling to install Emmet and I finally got it working.
    Also great codecuts you’ve added, always comes in handy.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *