Code Ultra Fast with Emmet

Aditya Kanodia
Published Wednesday, November 13, 2013
Hey guys! Today we have a guest post from our friend Aditya Kanodia. This post is so cool that you can code a whole HTML page with just a single line of code, no exaggeration!. So keep on reading below! ~ Mike

Have you ever wished to code your websites really fast? If yes, then Emmet is just the right thing for you! Emmet is an extension made for your code editors to simplify your coding work.

So, in this article I will be showing how to get Emmet for your favorite editor and work with it.

1.0 Downloading Emmet

To download Emmet, visit the download page and choose your favorite editor. Here, I am choosing bracket as my code editor.

2.0 Working With Emmet

Working with Emmet is quite an easy task. We just have to wite the abbreviations and expand it by pressing Ctrl + Alt + Enter (Only in Brackets, for other please check the settings of your code editor.)

Let’s start with a simple example. Write the following code in brackets:


Now press Ctrl + Alt + Enter to expand, make sure your cursor is at the end of this line. After you have expanded it, the result will be something like this:

    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>

Boom! Are you amazed? It generates list items under unordered lists and also creates image tags for each li with alt attribute. This was really quick.

Now, let’s specify an "id" for our ul and make the HTML Markup for a random navigation. In Brackets, write the following code:

ul#nav>li*5>a{Page $}

In this case we write #nav as our id of ul tag. You might have noticed that I used {Page $} after anchor tag, that is because I want to make random names for my list items, where “PAGE” will remain constant and the numbers will increase from 1 to 5. Now expand this. And we get something like this:

<ul id="nav">
    <li><a href="">Page 1</a></li>
    <li><a href="">Page 2</a></li>
    <li><a href="">Page 3</a></li>
    <li><a href="">Page 4</a></li>
    <li><a href="">Page 5</a></li>

So! That was cool, wasn’t it? Play around with different tags and use Emmet to the fullest.

3.0 The Ultimate Magic

Ok, here is the ultimate magic!

What if you want to make the HTML code for the whole page which has all the normal elements including logo, navigation and footer?

Surprise! I have the code which I made after researching and playing around with Emmet. And here it is:

html:5>div#container>div#header>div.mainLogo+ul#navigation>li*5>a{Page $}^^^+div#mainContent>h1+p*4^div#footer

Before we expand, let me explain a couple of things.

Html:5 is used to define the html 5 doctype. We have used + operator between mainLogo and ul and a couple of more times to place the tags on the same level. We have used ^^^ to shift the level of different ids slightly above. To make it clear play around with these and test what happens when you reduce or increase the number of exponents. Now, let’s expand our abbreviation. So here is how our HTML code looks after expanding:

<!doctype html>
<html lang="en">
    <meta charset="UTF-8">
    <div id="container">
        <div id="header">
            <div class="mainLogo"></div>
            <ul id="navigation">
                <li><a href="">Page 1</a></li>
                <li><a href="">Page 2</a></li>
                <li><a href="">Page 3</a></li>
                <li><a href="">Page 4</a></li>
                <li><a href="">Page 5</a></li>
        <div id="mainContent">
        <div id="footer"></div>

Cool isn’t it? You can change the ids according to your need and add or subtract the elements as per your choice. So good luck with Emmet and hope you code faster from now onwards!

4.0 Video Resource

If you have any queries, feel free to drop your comments below.

About Aditya Kanodia

My name is Aditya Kanodia. I am based in New Delhi, the capital of India. I am a web designer and love fresh and innovative designs. I love to code and have an expertise in HTML5 and CSS3.

Follow: Twitter |

For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.