Let's Know about Emmet.

Let's Know about Emmet.

Table of contents

No heading

No headings in the article.

You must be knowing about this term or you were curious to know what this is that's why you landed here. So let's make you familiar with this term.

Emmert is a toolkit specially used for web development preciously for HTML(hypertext markup language). It is the software which is already installed in visual studio code but if you are using any other software then you have to install it. This makes our work very easy and fast by helping in various ways. As you all know in HTML there is a boilerplate code which we get on our screen by just pressing the exclamation mark and tab key in vs code. It is also used to give both opening and closing entities by just writing opening one and hitting the tab. This happens because of emmet we need not write the whole code which is:

<!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>

In this code :

-Doctype means a type of document which is in HTML.

-lang means the language of the document.

- meta means information about the information of the document.

-UTF-8 in meta charset means uniform transformation format which helps to display what we have written.

....and many more.

Emmet also helps us to give code abbreviations,

for example:

  • we can write a class in HTML by just typing p.class1 and hitting the tab, it will show:

  •     <p class="class1"></p>
    
  • we can write id in HTML by just typing h2#id1 and hitting the tab, it will show: <h2 id="id1"></h2>

  •      <h2 id="id1"></h2>
    
  • There are more shortcuts that we will discuss in upcoming articles.