Emmet is nothing but a shortcut to write and complete your code faster. Using emmet lines of code can be written at any instant. I like to relate emmet with fill in the blanks. You write a sentence or in some cases just a word and a whole para of fill in the blank gets created for you to fill in.

Emmet is more often used in HTML and CSS coding. Various code editors like VS code, Sublime text etc have a built-in feature of Emmets.

Here are few of many emmets that I love using:

1. The html:5 abbreviation

   Type down html:5 and press enter; you’ll get a basic doctype html skeleton to start writing the HTML code.

2. Frequently used HTML tags

   a. Typing basic tag like div, header, h1..h6, btn, ftr and pressing Enter would give you the complete tag.

   b. btn (button tag) further has 3 sub emmets:

   • btn:d gives <button type="disabled"></button>, doesn’t allow the user to click.
   • btn:r gives <button type="reset"></button>
   • btn:s gives <button type="submit"></button>, as the name suggests it submits the information.

3. CSS emmets

   While writing CSS we use class or id to refer the html tag to apply CSS. We can use . and name of the class to create a div with class name. Similarly, we can use # and id name to create a div of that id.
   So .container in HTML gives us: <div class="container"></div>
   and #container would give us: <div id="container"></div>
   

4. Content and Grouping

   Dummy text like that of "Lorem ipsum dolor sit a..." can be written with lorem and pressing enter.Need more dummy content ?,then simple multiple lorem with the number of lines you want. Eg: lorem*3

   As i wrote in the begining, multiple lines of code can be written in single instant. div>(header>ul>li>a) is would give us:
   <div><header><ul><li><a href=""></a></li></ul></header></div>

Finally i would like to conclude by providing you’ll a cheatsheet which i found it to be useful!!