Ultimate guide for Emmet: Speed up your html workflow

Ronak Mutha September, 2021

Finally I decided to write a blogpost.(I was compelled to, JK ). As it was compulsory to write a blogpost(technical or non-technical) for neogcamp level One admissions, that too without plagiarism 😧, so I thought what can I write 🤔🤔 as I had never written anything before, except for the exam papers, of course 'coz grades. But when I sat down thinking for a topic to write, I came up with tons of ideas. Most of them being something that I use in my day to day life, like Emmet, VSCode plugins/shortcuts, Web-development path/roles/technologies, JavaScript/TypeScript basics and advanced, HTML, CSS selectors/advanced selectors/flex/grid, you know how mind is when you need one idea, sometimes it gives you 1000 and sometimes not even one. So finally, I chose two topics 🥳, this post will be about my most used plugin apart from Live server in VS Code, Emmet. And in next post we will talk about JavaScript arrays.

So what is Emmet???

Emmet is an essential toolkit for web-developers writing HTML & CSS. You've already known how to use Emmet abbreviations: its syntax is inspired by CSS selectors. According to the official Emmet Documentation, Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.

As you now know what Emmet is, let's move on to the main part...

How do we use Emmet???

Well, I don't want this post to be way too long. So we'll learn how to use Emmet to increase speed our HTML workflow. For the rest part an official Emmet cheat-sheet will be attached at the end of this blog, if you want to print it out for reference.

Let's get familiar with important symbols/terms used in Emmet, so you won't go blank while referring cheatsheet.

Child: >, Sibling: +, and Climb up(Immediate Parent element): ^

In HTML, we often use term parent, child and sibling. So, what is parent, sibling and child? Let's understand this with an example.
```
Example:
                
                    div+div>p>span+em^bq
                
Above Emmet shortcut will produce the following result,
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
            
```
Didn't understand anything? Don't worry, I'm here to explain. After this blog, you won't go back to typing all code for HTML and CSS.
1. In the above example, first div is printed as div element.
2. '+' denotes next element will be sibling of previous tag. Sibling in HTML DOM tree is similar to sibling in a family tree, Sibling in HTML DOM tree means someone which is at same heirarchy level and of same parent element in HTML Document tree.
3. Hence, next div tag is printed at same heirarchy level.
4. Then comes '>', denotes next tag will be child element of previous tag. Child in HTML DOM Tree also resembles children in family tree. Child element will be at next level in HTML DOM tree of parent element.
5. Hence, we see -
```
p inside of div as it is children of div
span inside of p as it is children of p
em at same level as span as it is sibling of span 
                    
```
6. Then comes the last and final symbol of child, parent and sibling thing, '^' is used to represent the same level as immediate parent. Anything after '^' will climb up to the immediate parent level.
7. Hence, we see -
```
 blockquote inside of div and as sibling of p instead of being child of p
```
Alright, long nuff explaination about the parent, child & sibling thing now let's know some more things we can do with Emmet.

Multiplication: *

This is used for having multiple elements. The number after * is used to convey Emment that we want this many elements. Refer to following example to understand what I want to say.

Example:
                ul>li*5
This will produce output with 5 li elements.
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ID: # and Class attributes: .

ID and Class attributes can be written by using # and . symbol respectively.

Example:
            #header

This will produce :
<div id="header"></div>

Example:
           .header

This will produce :
<div class="header"></div>

Remember when # and . are used without prepending them with any HTML tag will produce output with div tag as default.

Custom Attributes

To add custom attributes to an element use following syntax:

Example:
                p[title="Hello world"]

This will produce :
<p title="Hello world"></p>

Adding Text inside an Element: {}

To add text directly inside an element using Emment, use following syntax:

Example:
                a{Click me}

This will produce :
<a href="">Click me</a>

Dynamically numbering Items: $

Fed up of naming items as item1 item2 item3 manually?

Don't worry Emmet will take care of that for you. With '$ we can now give numbering to our items or anything you want to number in increasing fashion. As always let's move head to know more with an example.

Example:
                ul>li.item$*5

This will produce output with 5 li elements.
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

Okay, that's enough learning for this blog. Now go outside and enjoy your life. Learning is a lifelong process but life is not so long, so go out now and meet your friends, spend time with your family or just do whatever makes you happy. Have a proper balance in work, learning and life.(Remember breathing is not living life, it's just being alive and both are different). No one knows what'll happen tomorrow. All we have with us is now so live in it.

On that note, signing off your host, dost, and in this case blog author, Ronak.

Emmet cheat-sheet