EMMET at a glance

EMMET makes the task of typing for HTML and CSS short.

The following are the few EMMET commands.
EMMET is already a built in extension for vscode.
The following are the commonly used shortcuts provided by EMMET

! - Template HTML DOC 5 code.
p - Paragraph tag
div - div tag
tag name in html - gives the open and closed tags along with common attributes.
(# as prefix)x - Gives a div tag with id x
.x - Gives a div tag with class x
(# as prefix)x.x - Gives a div tag with class x and id x.
p.x - Gives a paragraph tag with class x.
p#x - Gives a paragraph tag with id x.
div*3 - Gives 3 div tags.
div.x*3 - Gives 3 div tags with class x.
div#x*3 - Gives 3 div tags with id x.
div>p>h1 - Gives a div with p as child with h1 as p's child.
div>p*3 - Gives a div with three child p tags.
div+p - Gives a div and p tags as siblings.