Emmet - VS Code Utility

Emmet allows us to write the HTML code faster. Thereby increasing the efficiency and saving our time. Let's see how we can do it.

Tip 1: To generate the starter code for HTML

Press ! symbol. You can see it is an EMMET abbreviation.

After you press enter, the following code will be generated.

So, you don't need to write it by yourself.

Tip 2:To generate a tag

In order to generate any tag for example - a div tag, instead of writing <div></div>, we can simply write div and then press enter. Emmet will automatically generate the opening and closing tags for us.
After you press enter, the following code will be generated.
If you want to generate multiple tags of the same type, then you can do:
After you press enter, the following code will be generated.

Tip 3: To give class to HTML tags

To generate a tag with a particular class we can do:

After you press enter, the following code will be generated.

A class can be shared between multiple HTML tags. To generate multiple tags with the same class, we can do:

After you press enter, the following code will be generated.

Tip 4: To give id to HTML tags

To give an id to a tag we can do:

After you press enter, the following code will be generated.

An Id is unique to every HTML tag. For example- If you want to generate three divs with id box-1, box-2, and box-3.
  • First, you will write div#box-. Now, after the dash, we have the variable part which will be 1,2 or 3.
  • Then we will use the $(dollar symbol) and write div#box-$*3. *3 means we want 3 tags and the dollar sign will write 1,2 and 3 after the dash in each tag.


After you press enter, the following code will be generated.

You don't need to memorize all the tips. Gradually, you will get used to them as you start using them.