Emmet for HTML

What Emmet is?

Emmit is a toolkit that allows developers to write code faster e.g. when we press { ! } in html tab and press “Enter “key the basic boiler plate code is written for us. it saves a lot of time and avoids very mistakes specially by beginners.

Why Emmet is useful for HTML beginners

Emmit is very powerful tool for beginners, beginners can focus on understanding the logic of HTML structure rather than the they memories the tags and gets stuck e.g if you want a main heading in Html you just type h1 and click enter to get the <h1></h1>. it saves a lot of time and begginers dont get stuck in this basic thing.

How Emmet works inside code editors

Emmet is a set of plug -ins for text editors that allows for high speed coding and editing in HTML,CSS etc. The user types a abbreviation type keyswords e.g ! for boiler plate,h1 for <h1> </h1>, . for class, # for ID.it is inspired by CSS selectors

Basic Emmet syntax and abbreviations

#header   <div id="header"></div>
.class    <div class="class"></div>
 a     <a href=""></a>
 h1    <h1></h1>

! .

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

</body>
</html>