# Top 5 useful Emmet Abbreviations

There are many Web Developers out there who are beginning their journey and are wasting a lot of time on the same boring HTML code, but after this blog, the coding process will become respectably fast for you, so here are some Emmet abbreviations.

Before moving any further let me explain what is Emmet.
Emmet is a set of plugins that is very helpful for Web-Developers to accomplish high-speed coding, we just have to write small abbreviations and the Emmet will auto-complete for you. 

__1) .container (.className)__ :
This will make a _**div**_ with the class name of container.
![Class Photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/600qa1jvygnb7amhfg6p.png)
<br>


__2) #container (#idName)__ :
This will make a _**div**_ with the id of container.
![Id photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0olb1c1yt2sx5vcmivi6.png
)
<br>


__3) .header>ul>li*4__ :
This will make a _**div**_ with a class of header and then nest a _**ul**_ tag which will consist of 4 _**li**_ tags.
![nest photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pjtsuhw8qisei24xdzx.png)
<br>

__4.) .main>.top+.bottom__ :
This will make a _**div**_ with the main class and then make two sibling elements a _**div**_ with top class and a _**div**_ with bottom class.
![sibling photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qrtk4lhm1d0cdbnpnxe.png)
<br>


__5.)  .header>(div.links>a{Google})+.footer__ :
This will make a _**div**_ with header class and then inside it, there will be 2 elements created, a _**div**_ with links class name and an _**a**_ tag which will have the content Google and a footer as a sibling of the .links _**div**_
![inside photo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yf73rzd3h3l013yivnp5.png
)

------
Thank you so much for reading the whole blog 🎉, if you liked it, do share it with your developer friends! 

------