Emmet

by Landon Lung

Cheat sheet

  • ! - Creates basic html structure.
  • > - Child - You can use > operator to nest elements inside each other.
  • + - Sibling - Use + operator to place elements near each other, on the same level.
  • element.someclass - ID or Class - In CSS, you use elem#id and elem.class notation to reach the elements with specified id or class attributes. In Emmet, you can use the very same syntax to add these attributes to specified element.
  • () - Grouping - Parenthesises are used by Emmets' power users for grouping subtrees in complex abbreviations.
  • * - Multiplication - With * operator you can define how many times element should be outputted.
  • $ - Item numbering - With multiplication * operator you can repeat elements, but with $ you can number them. Place $ operator inside element’s name, attribute’s name or attribute’s value to output current number of repeated element.
  • {} - Text - You can use curly braces to add text to element.

the essential toolkit for web-developers

What is it?

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow:

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Why should I care?

Short Answer: it speeds up your workflow.

Longer Answer: it adds some fun into writing basic boilerplate code. It allows you to worry less about having to close tags, or create a list of 20 items. No more copy and pasting 20 times and then changing numbers.

What are we creating?

Today we are creating a simple site with header, footer , and an area for content. The site will have 5 links in the header and footer, as well as a heading and paragraph in the content area.

Let's get started

Step 1

We need some simple html to start the page. Type the following code:

code
!
result
<!DOCTYPE html>  
<html lang="en">  
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

Here we created a generic plate of code full of html, head , and a body tags.

Step 2

Next, lets create a div inside with a class of main.

code
!>div.main
result
<!DOCTYPE html>  
<html lang="en">  
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div class="main">
        </div>
    </body>
</html>

Here we used the ">" greater than symbol to tell emmet we wanted the next element to be a child of the previous element. div.main tells emmet we want a div with a class of main attached to it.

Step 3

Next, lets add a header to our project:

code
!>div.main>(header.header>ul>li*5>a{Header Link $})
result
<!DOCTYPE html>  
<html lang="en">  
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div class="main">
            <header class="header">
                <ul>
                    <li><a href="">Header Link 1</a></li>
                    <li><a href="">Header Link 2</a></li>
                    <li><a href="">Header Link 3</a></li>
                    <li><a href="">Header Link 4</a></li>
                    <li><a href="">Header Link 5</a></li>
                </ul>
            </header>
        </div>
    </body>
</html>

There is a lot going on here. First, we told emmet we wanted the header to be a child of main. Next, we used parenthesis to say everything between them is part of the same level. We created an HTML5 header element with the class of header. Then, we told it to have a child of a ul , and the ul to have 5 children of list-items. Each list-item will have an anchor tag with the text "Header Link __aSyNcId_<_qivIwhzM__quot;. Where the dollar sign is a count it will start from 1 and count to the number you specified.

Step 4

Lets add a content area to our project:

code
!>div.main>(header.header>ul>li*5>a{Header Link $})+(section.content>h3{some header}+p{some content})
result
<!DOCTYPE html>  
<html lang="en">  
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div class="main">
            <header class="header">
                <ul>
                    <li><a href="">Header Link 1</a></li>
                    <li><a href="">Header Link 2</a></li>
                    <li><a href="">Header Link 3</a></li>
                    <li><a href="">Header Link 4</a></li>
                    <li><a href="">Header Link 5</a></li>
                </ul>
            </header>
            <section class="content">
                <h3>some header</h3>
                <p>some content</p>
            </section>
        </div>
    </body>
</html>

Here, we used the same parenthesis to tell emmet to make the section we are creating on the same level as header. We then told emmet that we wanted to have two kids. An h3 tag, along with a p tag. Remember, the + (plus) tells emmet to make things on the same level. The {} (squigly brackets) tell emmet to add that text.

Step 5

Lets add a footer to our project:

code
!>div.main>(header.header>ul>li*5>a{Header Link $})+(section.content>h3{some header}+p{some content})+(footer.footer>ul>li*5>a{Footer Link $})
result
<!DOCTYPE html>  
<html lang="en">  
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div class="main">
            <header class="header">
                <ul>
                    <li><a href="">Header Link 1</a></li>
                    <li><a href="">Header Link 2</a></li>
                    <li><a href="">Header Link 3</a></li>
                    <li><a href="">Header Link 4</a></li>
                    <li><a href="">Header Link 5</a></li>
                </ul>
            </header>
            <section class="content">
                <h3>some header</h3>
                <p>some content</p>
            </section>
            <footer class="footer">
                <ul>
                    <li><a href="">Footer Link 1</a></li>
                    <li><a href="">Footer Link 2</a></li>
                    <li><a href="">Footer Link 3</a></li>
                    <li><a href="">Footer Link 4</a></li>
                    <li><a href="">Footer Link 5</a></li>
                </ul>
            </footer>
        </div>
    </body>
</html>

First, we told emmet we wanted the footer to be a child of main. Next, we used parenthesis to say everything between them is part of the same level. We created an HTML5 footer element with the class of footer. Then, we told it to have a child of a ul , and the ul to have 5 children of list-items. Each list-item will have an anchor tag with the text "Header Link __aSyNcId_<_qivIwhzM__quot;. Where the dollar sign is a count it will start from 1 and count to the number you specified.

Final code

Click your mouse on the end, and press the tab key. It will result in the following:

code
!>div.main>(header.header>ul>li*5>a{Header Link $})+(section.content>h3{some header}+p{some content})+(footer.footer>ul>li*5>a{Footer Link $})
result
<!DOCTYPE html>  
<html lang="en">  
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div class="main">
            <header class="header">
                <ul>
                    <li><a href="">Header Link 1</a></li>
                    <li><a href="">Header Link 2</a></li>
                    <li><a href="">Header Link 3</a></li>
                    <li><a href="">Header Link 4</a></li>
                    <li><a href="">Header Link 5</a></li>
                </ul>
            </header>
            <section class="content">
                <h3>some header</h3>
                <p>some content</p>
            </section>
            <footer class="footer">
                <ul>
                    <li><a href="">Footer Link 1</a></li>
                    <li><a href="">Footer Link 2</a></li>
                    <li><a href="">Footer Link 3</a></li>
                    <li><a href="">Footer Link 4</a></li>
                    <li><a href="">Footer Link 5</a></li>
                </ul>
            </footer>
        </div>
    </body>
</html>

Where do I get it?

Download it here for your favorite IDE or editor.