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'
Code language: PHP (php)
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

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>
Code language: HTML, XML (xml)
Also try: a:mail
<a href="mailto:"></a>
Code language: HTML, XML (xml)
And if you type a{Name here}
it will show you:
<a href="">Name here</a>
Code language: HTML, XML (xml)
You can use this for many other attributes.
You can also give a class or id such as: header.logo
or header#logo

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

>
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>
Code language: HTML, XML (xml)
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>
Code language: HTML, XML (xml)
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.

Leave your feedback and help us improve 🐶
We hope you found this article helpful! If you have any questions, feedback, or spot any errors, please let us know in the comments. Your input is valuable and helps us improve. If you liked this article, please consider sharing it with others. And if you really enjoyed it, you can show your support by buying us a cup of coffee ☕️.
Thank you for your feedback and support!
25 Comments
Hello There. I discovered your weblog using msn. This is
an extremely smartly written article. I will make sure
to bookmark it and come back to learn more of your
useful information. Thanks for the post. I will definitely comeback.
Hey There. I found your weblog the usage of
msn. That is a very neatly written article. I will
be sure to bookmark it and return to read extra of your useful info.
Thanks for the post. I will certainly return.
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.
Hi there, I want to subscribe for this website to obtain newest updates, therefore where can i do it please assist.
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!
Lovely just what I was searching for. Thanks to the author
for taking his clock time on this one.
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 :
).
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!
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!
Very good, bro.
very helpful….thanks
Thank you soo much!
I did not found emmet package even after typing emmet
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 😉
Nice …. Thanx
With pleasure!
Thank you very nice!
You are very welcome.
Nice bro.
can somebody please guide me how to restart the sublime text 2..as i am unable to do hence unable to install emmet successfully
Hi, to restart you should close and re-open the application.
Cool tutorial.
Great tutorial!
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.