What is Emmet and What are the advantages of using Emmet?

Rudraprasad MohapatraRudraprasad Mohapatra
2 min read
  1. What is Emmet?

Ans:-Emmet is a plugin for text editors that allows writing HTML and CSS faster by using abbreviations that expand into a full block of code with a single keystroke.

  1. What are the advantages of using Emmet?

Ans:-

  • It saves a lot of time:- During a small time by using abbreviations, we can get the desired format of code with the help of emmet.

  • Easy to learn:- Abbreviations are self-explanatory even for a beginner it is easy to understand and implement.

  • Improves productivity:- As complex codes take less time to code, So it improves productivity.

  • Helps to write more consistent code:- Codes generated by the emmet look and behave as they hold together.

  • Widely supported:- Emmet supports languages that are purely markup-based like HTML, PUG and XML etc. and stylesheet-based like CSS and SCSS etc..

      <!DOCTYPE html><!--This line says to the browser that  the coming down document(from line-2 onwards is the type of HTML5)  -->

  <html lang="en"> <!--This line says laguage is english i.e whatever i will write that is in the form of english language  -->
  <head>
      <meta charset="UTF-8">  <!-- It says Whatever you are writing inside the body tag it will show you as it is ,there is no convertion techniques are apllied like: convert characters to ascii values etc. like things.-->
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--This line says what ever we are writing display it also in Internet Explorer -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--This line says set the width to the device's width(13 inch or 14 inch or 18.56 inch etc.) in which the html document is opening and set that width to the initial scale 1.0,Now when we zoom it will increase to 1.1,1.2,1.3,.. & so on and when we zoom out it will move from 0.9 ,0.8,.. & so on. -->
      <title>Document</title>
  </head>
  <body>
      <!-- meta - means data about data. -->
      <!-- a.link[href=https:/google.com][name=values]  --> <!--Emmit-->>
      <a href="https:/google.com" class="link" name="values"></a>
  </body>
  </html>
0
Subscribe to my newsletter

Read articles from Rudraprasad Mohapatra directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Emmetadvanatages of using EmmetSupports EmmetUses of Emmet

Written by

Rudraprasad Mohapatra
Rudraprasad Mohapatra