DEV Community

Cover image for Emmet Crash Course!
Ustariz Enzo
Ustariz Enzo

Posted on

Emmet Crash Course!

Hey fellow creators,

Let's boost your productivity with Emmet!

Originally, Emmet was an extension that's become so popular it's now been integrated into VS Code and other code editors. It's simply a shortcut extension that's very useful!

Let's learn the most useful shortcuts!

If you prefer to watch the video version, it's right here :

1. Create a div with a class.

The first and most used shortcut will be the dot. It will allow you to create a div with a class quickly. For instance, write .box and then press tab/enter on your keyboard, this will create the following line of code:

.box

<div class="box"></div>
Enter fullscreen mode Exit fullscreen mode

By default, it will assume that you want a div.
You can also write div.box and then press tab/enter, which will do the same thing. But that means that you can also create another tag with a class, for instance li.box will create:

li.box

<li class="box"></li>
Enter fullscreen mode Exit fullscreen mode

You can also create a div with multiple classes by writing for instance div.box.square.circle and then pressing tab/enter:

div.box.square.circle

<div class="box square circle"></div>
Enter fullscreen mode Exit fullscreen mode

2. Create a div with an ID.

The way to create a div with an ID with Emmet is pretty similar, instead of a dot you simply need to use a hashtag. So write #myElement and press tab/enter and the following div will be created:

#myElement

<div id="myElement"></div>
Enter fullscreen mode Exit fullscreen mode

You can also mix the class and the id by writing for instance :

div#id.box

<div id="id" class="box"></div>
Enter fullscreen mode Exit fullscreen mode

3. How to create multiple divs at the same time?

In order to create a div with the same classname multiple times quicker than before, you can simply write .box*6 for instance, which will create six divs with the class name "box":

.box*6

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
Enter fullscreen mode Exit fullscreen mode

4. You can add some text content!

If you already know what your tag's content will be, you can simply write it in between curly braces, for instance writing h1{Hello World} and pressing tab/enter will create:

h1{Hello World}

<h1>Hello World</h1>
Enter fullscreen mode Exit fullscreen mode

5. Get the index.

In order to have an index, you can type h1{$}*6 and press tab/enter, which will create:

h1{$}*6

<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
Enter fullscreen mode Exit fullscreen mode

6. Play with the index in your classes!

By typing p.txt-${$}*6 and pressing tab/enter, you'll create an index with the same class:

p.txt-${$}*6

<p class="txt-1">1</p>
<p class="txt-2">2</p>
<p class="txt-3">3</p>
<p class="txt-4">4</p>
<p class="txt-5">5</p>
<p class="txt-6">6</p>
Enter fullscreen mode Exit fullscreen mode

The dollar symbol will symbolise the index every time.

7. Create nested elements.

Write .parent>.child and press tab/enter to create nested elements:

.parent>.child

<div class="parent">
      <div class="child"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

It is very useful when you want to create a list or a form for example!

Let's create a complex nested example together. Let's say you want to create a container with a ul list within which you'll have six li elements, all of which will have the same class name. Try it yourself first!

<div class="container">
      <ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
      </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

Here's the solution: type .container>ul.list>li.item*6 and press tab/enter.

8. Create something at the same level (instead of nested).

Use the + sign to create two divs at the same level: .box1+.box2 will create:

.box1+.box2

<div class="box1"></div>
<div class="box2"></div>
Enter fullscreen mode Exit fullscreen mode

9. Go one level up!

It's useful if you want to create a nested element followed by a simple div for instance. In order to do that, you need to use ^, like so:

.container>child^.container2

<div class="container">
     <div class="child"></div>
</div>
<div class="container2"></div>
Enter fullscreen mode Exit fullscreen mode

10. You can also group things up!

Let's imagine that inside of your container you want a list with li elements, but then you want to go up with a paragraph. You can therefore do it like this:

.container>(ul>li*6)^p

<div class="container">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
</div>
<p></p>
Enter fullscreen mode Exit fullscreen mode

11. Create a full doctype quickly!

To create a doctype very quickly, you just need one key and that's an exclamation point! Type ! and then press tab/enter and voila!

! + tab/enter

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

    </body>
    </html>
Enter fullscreen mode Exit fullscreen mode

12. Create any element with its name!

You can simply write an element's name and then press tab/enter and it'll create said element.
Some elements even come with attributes, that you can then change however you need. For instance, by typing input and pressing tab/enter, you'll have the following code:

<input type="text">
Enter fullscreen mode Exit fullscreen mode

The same goes for textarea, form, img, a, etc.

<textarea name="" id="" cols="30" rows="10"></textarea>
<form action=""></form>
<img src="" alt="">
<a href=""></a>
Enter fullscreen mode Exit fullscreen mode

As you can see you'll now be able to gain many precious seconds in your coding time!

Here's the full crash course.

Come and take a look at my Youtube channel: https://www.youtube.com/c/Learntocreate/videos

See you soon!

Enzo.

Discussion (0)