Emmet extension allows expanding the simple abbreviations into complex code snippets.

Emmet extension is one of the best extensions in the adobe brackets and makes the coder's life significantly easier.

Installing process –

The Emmet installation process is explained below.

• Open the adobe brackets editor.
• Click on the file and then click on the Extension Manager or directly click on the extension button in the top right corner.
• Then click on the extension button and search for Emmet.
• Click on the Install button.

The Emmet plugin is used for the code editors like Brackets, Eclipse, Dream Weaver, etc. This Emmet plugin is mainly helping to expand the tags with the help of abbreviations.

In the Emmet extension, there are many options, which can explain the different types of abbreviations and the structure of the tags.

Different types of abbreviations –

There are a lot of different types of abbreviations in the Emmet Extension. Some of them are explained below.

• To create the skeleton of the HTML.
• To create child elements using '>'.
• To generate the sibling elements using '+'.
• To create ID attribute.
• To create CLASS attribute.
• To create CLASS with ID.
• To create implicit tag names.
• To render text within an element using {} character.
• To generate the code multiple times using *.
• To add numbers using $.
• To show the custom attributes.
• Climb up.
• Grouping.

To create the skeleton of the HTML -

To create the HTML skeleton, type the exclamation mark (!), use the '>' character, and type the HTML. After typing that, click on the Emmet menu and select the Expand Abbreviation.

Example –

!>html>body

Output –

To create child elements using '>' -

To create the child elements using the '>' character. The second tag becomes the child of the first tag. After typing the different tags, click on the Emmet menu and select the Expand abbreviation.

Example –

div>ul>li

Output –

To create the sibling elements using '+' -

To create the sibling elements using the '+' symbol. In this, all the tags are at the same level. After typing the different tags, click on the Emmet menu and select the Expand abbreviation.

Example –

p+section+p1+section2

Output –

To create ID attribute -

To create the ID attribute using the '#' character. Type the tag name and type the '#' symbol, then type the name for ID. After typing the tag name and ID, click on the Emmet menu and select the Expand abbreviation.

Example –

div #Brackets

Output –

To create CLASS attribute -

To create the CLASS attribute using the '.' character. In this, type the tag name, type the '.' character, and then type the CLASS name. After typing the tag name and CLASS attribute, click on the Emmet menu and select the Expand abbreviation.

Example –

div.adobebrackets

Output –

To create CLASS with ID -

To create the CLASS with ID using the ‘#’ and ‘.’ characters. In this, type tag name, ID by using the ‘#’ symbol and type the CLASS by using the ‘.’. After typing the tag name, CLASS attribute, and ID, click on the Emmet menu and select the Expand abbreviation.

Example –

div#Brackets.Extensions.Themes

Output –

To create implicit tag names -

To create the implicit tag name by using the ‘>.’ characters. Type the tag name and then type the '>'. and then type the class name. After typing the tag name and the CLASS name, click on the Emmet menu and select the Expand abbreviation.

Example1 –

ul>.Extension

Output1 –

Example2 –

Table>.rows>.columns

Output2 –

To create text within an element using {} character -

Sometimes there is a need to type some text in between the tags. Here the written text can place in between the {} braces. After typing the text, click on the Emmet and then click on the Expand abbreviation.

Example –

li{Brackets editor}

Output –

To create the code multiple times using * -

To create the tag multiple times using the '*' symbol. The tag is required multiple times, the '*' symbol, and the number for printing. After typing this, click on the Emmet and then click on the Expand abbreviation.

Example –

div>ul>li*8

Output –

To add numbers using $ -

Sometimes there is a need to add the numbers in between the tags. Here the number of digits can place after the $ symbol. After typing the text with the $ symbol, click on the Emmet and click on the Expand abbreviation.

Example1 –

div#Brackets>ul>li.Extension$*5

Output1 –

Example2 –

div.Brackets>ul>li#{Extension$@6}*4

Output2 –

Example3 –

div.Brackets>ul>li.Themes$@-*8

Output3 –

To show the custom attributes -

Emmet plugin can also help to expand the custom attributes. Here the required values are given. Then click on the Emmet menu and then click on the Expand attributes.

Example –

div#Brackets>img[src="Extension" alt="" class=""]*5

Output –

Climb up -

Sometimes, there is a need to get the same elements with other elements in the single main tag. In this situation, climb up is used. The climb-up process can be done by using the '^' symbol. After that, click on the Emmet menu and then click on the Expand attributes.

Example –

div>p1>a[href=””]^p1

Output –

Grouping -

Grouping is the best way to clear all the unexpected errors. Grouping can be done by using the () braces. In this situation, the elements can separate very easily. After that, click on the Emmet menu and then click on the Expand attributes.

Example –

div.Brackets>(p1>ol>li)+p2>ul>li

Output –