Code Ultra Fast with Emmet

DOWNLOADING EMMET

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

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:

Ul>li*4>img

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:

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

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>
</ul>

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

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">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <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>
            </ul>
        </div>
        <div id="mainContent">
            <h1></h1>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

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!

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.

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.