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>