# Write blazingly fast HTML with Emmet 🌩️

[Emmet](https://emmet.io/) is a web-developer’s toolkit for boosting HTML & CSS code writing.
You can type expressions and it gets converted into code snippets 🪄.
![magic.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657626736876/hWovdOvio.gif align="left")

Their tagline is `Emmet — the essential toolkit for web-developers` which is true in some sense, web-devs usually do not work on any project without Emmet.

It comes pre-install with VS Code, but it should be available for the majority of the code editors. But for this blog post, we'll stick to VS Code 🦄

## Let's start with things that you can integrate right now!

Literally, stop doing everything and try them now!

- 🧑‍💻**HTML boilerplate code**<br/>
Writing DOCTYPE and HTML and HEAD and TITLE can sometimes feel like more work than actually creating the structure of the website! But with Emmet, the colourless process of writing all this can be done with ease.<br/>Use `!` and press TAB/Enter.
```
!
```
![boilerplate.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657627889034/rw7cGihaC.gif align="left")

- 🏷️**Tags on the go**<br/>
We can make use of Emmet to generate <> and </> for tags. We just need to write a tag name we want to generate and hit TAB/ENTER to generate a freshly baked opening and closing tag.
```
nav
``` 
![tags.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657628142815/EaXarVF9U.gif align="left")


- 🪪**Tags with ID's or Classes**<br/>
We can use Emmet to generate tags with classes/ids already filled in to save some more time!<br/>
Use `.class-name` `#id-name` with the tag name (or without for generating a div)
```
footer.my-footer#sticky
.about-section
```
![footer.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657631026844/FOGcRUuc4.gif align="left")


- 🤖**Lorem**<br/>
Lorem can be generated using `lorem`. We can also declare how many words is to be generated. 
```
lorem
lorem60
```
![lorem.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657632670858/cVbvno2SY.gif align="left")

- 👯**Relations within tags and multiple elements**<br/>
Generating tags with automatically filled classes is... yeah, I get it, not brag worthy. But now you will see the real power of Emmet.<br/>
Use `>` for nesting and `+` for generating a tag on the same level. And the best part, we can generate multiple elements by using `*`<br/>
Example:
```
table>(tr>th*3)+(tr>td*3)*4
``` 
![table.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657630029938/7BxQs4vur.gif align="left")
We can also generate numbers using `$`, check Example 2 for the same.

### ✨More Examples✨<br/>
#### Example 1

Let's say we have to design a nav bar, we will be needing multiple links and an element for brand image.<br/> After what we have learned we can easily design it using Emmet.
```
nav.navbar>div.brand>img.brand-logo+ul>(li.nav-item>a.nav-link)*4
```
![nav.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657629431711/hIS9iAJgK.gif align="left")

#### Example 2

What if you need to generate different ids for the elements generated through Emmet `*` property?<br/>Don't worry they got you covered! Observe `$`.
```
ul>(li#item-$>lorem10)*5
``` 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657635341050/b8r4IYT7a.png align="left")

#### Example 3
Generating multiple tags simultaneously using Emmet.

```
div>(header>ul>li*3>a)+footer>p
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657636743017/1AcRRmyUp.png align="left")

Emmet also offers shortcuts for CSS, like `bgc` for background-color, they are easy to work with, you just need to give the first characters of each work of a CSS property and VS Code will give you suggestions as soon as you type something. 

Thats all for this post! I hope you learned something.

Happy learning ✨

You can find more recourses to study Emmet below 👇
- [Emmet Official Docs](https://docs.emmet.io/)
- [Emmet Official Cheatsheet](https://docs.emmet.io/cheat-sheet/)
- [FCC Emmet Blog](https://www.freecodecamp.org/news/write-html-css-faster-with-emmet-cheat-codes/)