The Emmet HTML can convert the given abbreviations into tags. To do that, provide the acronym, and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu

For example, provide 'a', and then click on the tab key, then the skeleton of the anchor tag is <a href=""></a>.

Different tags –

There are different types of tags that can expand very quickly. Some of the tags are explained below.

• bdo tag
• link tag
• meta tag
• img tag
• source tag
• area tag
• form tag
• input tag
• select tag
• button tag
• anchor tag

bdo tag –

The bdo tag consists of two types of abbreviations. They are bdo:r and bdo:l.

Type the 'bdo:r' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

bdo:r

Output –

'bdo:l' expands similarly as 'bdo:r'.

link tag –

The link tag consists of three types of abbreviations. They are link:css, link:favicon and link:rss.

Type the 'link:css' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

link:css

Output –

link:favicon and link:rss expands similarly as 'link:css'.

meta tag –

The meta tag consists of three types of abbreviations. They are meta:utf, meta:vp and meta:compat.

Type the 'meta:utf' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

meta:utf

Output –

meta:vp and meta:compat expands similarly as 'meta:utf'.

img tag –

The img tag consists of two types of abbreviations. They are img:srcset / img:s and img:sizes / img:z.

Type the 'img:srcset / img:s' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

img:srcset / img:s   

Output –

img:sizes / img:z expands similarly as 'img:srcset / img:s'.

source tag –

The source tag consists of different types of abbreviations. They are source:src/src:sc, source:type, source:media and source:media:type.

Type the 'source:src/src:sc' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

source:src/src:sc

Output –

source:type, source:media and source:media:type expands similarly as 'source:src/src:sc'.

area tag –

The area tag consists of different types of abbreviations. They are area:d (default), area:c (circle), area:r (rectangle) and area:p (polygon).

Type the 'area:d' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

area:d

Output –

area:c (circle), area:r (rectangle) and area:p (polygon) expands similarly as area:d

form tag –

The form tag consists of two types of abbreviations. They are form:get and form:post.

Type the 'form:get' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

form:get

Output –

form:post expands similarly as form:get.

input tag –

The input tag consists of different types of abbreviations. The main ones are input, inp, input:email, input:datetime, input:radio.

Type the 'input' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

input

Output –

Type the 'inp' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

inp

Output –

Type the 'input:email' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

input:email

Output –

The other input tag abbreviations input:datetime, input:radio, input:hidden, input:text, input:search, input:url, input:password, input:month, input:week, input:time, input:tel, input:number, input:color, input:checkbox, input:range, input:file, input:submit, input:image, input:button, input:reset expands similarly as input:email.

select tag –

The select tag consists of only one type of abbreviation that is select:disabled.

Type the 'select:disabled' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

Select:disabled

Output –

button tag –

The button tag consists of four types of abbreviations. They are button:submit / button:s / btn:s, button:reset / button:r / btn:r, button:disabled / button:d / btn:d and fieldset:disabled / fieldset:d / fset:d / fst:d.

Type the 'button:submit / button:s / btn:s' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

button:submit / button:s / btn:s

Output –

button:reset / button:r / btn:r, button:disabled / button:d / btn:d and fieldset:disabled / fieldset:d / fset:d / fst:d expands similarly as button:submit / button:s / btn:s.

anchor tag –

The anchor tag consists of only one type of abbreviation that is 'a'.

Type the 'a' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

a

Output –

Using some part of the tag –

Some tag names can identify without the full name of the tag. They are specified with the main letters in the tag or starting letters of the tag and use the Expand option to get the full tag coding.

Expanding can be done using the tag characters in below ways -

• Use the main two letters.
• Use the main three letters.
• Use the main five letters.
• Use the first three letters of the tag.
• Use the first four letters of the tag.
• Use the first five letters of the tag.

Use the main two letters –

The tags are represented by using the main two letters.

Blockquote –

Type the 'bq' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

bq

Output –

<blockquote></blockquote>

Similarly, kg for <keygen>, mn for <main>, etc,.

Use the main three letters –

The tags are represented by using the main three letters.

fieldset –

Type the 'fst' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

fst

Output –

<fieldset></fieldset>

Similarly, btn for <button>, hdr for <header>, ftr for <footer>, adr for <address>, dlg for <dialog>, cmd for <command>, etc,.

Use the main five letters –

The tags are represented by using the main five letters.

Textarea –

Type the 'tarea' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

tarea

Output –

<textarea></textarea>

Use the first three letters of the tag –

The tags are represented by using the first four letters.

Picture –

Type the ‘pic’ and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

pic

Output –

<picture></picture>

Similarly, ifr for <iframe>, emb for <embed>, obj for <object>, cap for <caption>, fig for <figure>, leg for <legend>, art for <article>, str for <strong>, tem for <template>, out for <output>, det for <details>, etc,.

Use the first four letters of the tag –

The tags are represented by using the first four letters.

figcaption –

Type the ‘figc’ and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

figc

Output –

<figcaption></figcaption>

Similarly, colg for <colgroup>, optg for <optgroup>, sect for <section>, prog for <progress>, etc,.

Use the first five letters of the tag –

The tags are represented by using the first five letters.

datagrid –

Type the ‘datag’ and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded as shown below.

Example –

datag

Output –

<datagrid></datagrid>

Similarly, datal for <datalist>, etc,.

Create parent with the child using '+' character –

Tags like ordered list, table, data list select, etc., are meaningless without their child tags. Emmet extension allows creating parent tags with their child tags using '+' character. Some of the tags are explained below.

• <ol> tag with the <li> tag.
• <ul> tag with the <li> tag.
• <dl> tag with the <dt> and <dd> tags.
• <map> tag with the <area> tag.
• <table> tag with the <tr> and <td> tags.
• <tr> tag with the <td> tag.
• <colgroup> tag with the <col> tag.
• <select> tag with the <option> tag.
• <picture> tag with the <source> and <img> tag.
• <optgroup> tag with the <option> tag.

Create <ol> tag with the <li> tag -

Type the 'ol+' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded with child tag as shown below.

Example –

ol+

Output –

Create <ul> tag with the <li> tag -

Type the 'ul+' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded with child tag as shown below.

Example –

ul+

Output –

Create <dl> tag with the <dt> and <dd> tags -

Type the 'dl+' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded with child tag as shown below.

Example –

dl+

Output –

Create <map> tag with the <area> tag -

Type the 'map+' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded with child tag as shown below.

Example –

map+

Output –

Create <table> tag with the <tr> and <td> tags -

Type the 'table+' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded with child tag as shown below.

Example –

table+

Output –

Create <tr> tag with the <td> tag -

Type the 'tr+' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded with child tag as shown below.

Example –

tr+

Output –

Create <colgroup> tag with the <col> tag -

Type the 'colgroup+ / colg+' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded with child tag as shown below.

Example –

colgroup+/colg+

Output –

Create <select> tag with the <option> tag -

Type the 'select+' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded with child tag as shown below.

Example –

select+

Output –

Create <picture> tag with the <source> and <img> tag -

Type the 'pic+' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded with child tag as shown below.

Example –

pic+

Output –

Create <optgroup> tag with the <option> tag -

Type the 'optgroup+ / optg+' and place the cursor at the end. Press the tab key or click on Expand Abbreviation from the Emmet Menu. Then the tag gets expanded with child tag as shown below.

Example –

optgroup+ / optg+

Output –