Emmet, the plugin that everyone should have.

By Darío Rivera

Posted On in HTML

Emmet was the first plugin I installed in a text editor to improve productivity while developing in HTML and CSS. I remember using SublimeText 2 at that time and was also learning PHP. I also remember being totally amazed by the capabilities of this plugin.

Emmet is a plugin to improve your workflow when working with HTML and CSS. It is a snippet plugin that will help you quickly create nested elements without having to manually add each opening and closing tag and every attribute. You'll see what I mean.

The best way to learn how to use Emmet is to see what it can do. So let's get started!.

Since Emmet is a snippet plugin, it will allow us to write just a few words to create something wonderful. Let's see how we can create an HTML5 scaffolding for our front page.

html:5

By typing the key that triggers Emmet, you'll get the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Not bad, right? Now let's see a list of combinations that we can use in emmet. As I said, this is the most didactic way I can find to teach you how to use emmet. You'll see that most of the syntax elements refer to CSS.

Child elements

Character: >
Goal: Nest elements
Example:

div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>

Sibling elements

Character: +
Goal: Position sibling elements
Example:

fieldset>legend+input

<fieldset>
    <legend></legend>
    <input type="text">
</fieldset>

Escalate the context

Character: ^
Goal: Position an item as a sibling by going up one level in the context
Example:

div>ul>li>a^li

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

Multiplier

Character: *
Goal: Generate an element the indicated number of times
Example:

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Grouping

Character: ( )
Goal: Group emmet statements
Example:

div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Id Attribute

Character: #
Goal: Indicate the id attribute of an element
Example:

div#app>label+input#search

<div id="app">
    <label for=""></label>
    <input type="text" id="search">
</div>

Class Attribute

Character: .
Goal: Indicate the class attribute of an element
Example:

div.app>label+input.form-control.input-sm

<div class="app">
    <label for=""></label>
    <input type="text" class="form-control input-sm">
</div>

Custom Attributes

Character: [ ]
Goal: Indicates the custom attributes to add to an element
Example:

td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3"></td>

I hope this list can give you the basics you need to start using Emmet. You can find more information about the syntax here. See you soon!.