What emmet is?

Emmet is a plugin/extension for text editors that allows you to write HTML and CSS faster by using abbreviations that expand into full code.

Features of emmet..?

Abbreviation expansion
Code formatting
Code snippets
Customization
Cross editor compatibility

Advantages of Emmet.

It saves time to code
helps you write more consistent code
improve productiviity
widely support
easy to learn

Now learn how to use emmet

Shortcut 1: Adding ID and Class attributes

to add a class or id to an HTML element using emmet you can use the following syntax: write a syntax and then click on the tab key to write full code.

.classname
#idname

you can also use custom attributes. and also add text by using curly brackets.

p{i am good boy} and then click on the tab.

<p> i am good boy </p>

Shortcut 2: create Parent-child grouping.

parent-child

write p>h1>div and then tap. for⬇️

<p>
    <h1>
        <div></div>
    </h1>
</p>

adding sibling

write h1>p+p+p and tap. for⬇️

<!-- Adding sibling using emmet -->

<h1>
    <p></p>
    <P></P>
    <P></P>
</h1>

Multiplication

writes p*3 and tap. for⬇️

<!-- multiplication -->

<p></p>
<p></p>
<p></p>

Grouping

write p>div>(p*3.class1)+footer

<!-- grouping -->
<p>
    <div>
        <p class="class1"></p>
        <p class="class1"></p>
        <p class="class1"></p>
        <footer></footer>
    </div>
</p>

To active boiler code

Write ! and tap.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

How Emmet Make Life Simple??