Emmet for HTML: A Beginner’s Guide to Writing Faster Markup

What is Emmet?

Emmet lets you write Html and CSS code fastly. You just give the shortcut and small abbreviations and press enter it will generate the code.

For Example :

In your code editor (ex: VS Code) if you type exclamatory mark ( ! ) .This will generate the basic structure

Why Emmet is useful for HTML beginners?

Emmets are useful especially for the beginners as it make writing code easy for them less frustatating and also faster. Its also save time .

1. Time effecient

   Beginners can practice more using these emmet as it save a lot of time in writing save code again and again just give short abbriveation and it will give the complete code

2. Prevents common mistake

   As a begginer you might do common mistakes but emmets automatically write up the code so common mistake like closing tags and wrong identation can be prevented

3. Make writing code more Enjoyable

   Writing the whole code is too much frustating but using emmets make it enjoyable as you don’t need to write the same thing again and again

4. Helps understand Html structure

   Using emmets also teaches you the understanding of the structure that how actually the flow is going

   For Example : ul>li*5

   \> : this denote the child

   * : multiple elements

   +: Add sibilings

How Emmet works inside code editors

In your code editor you just write the short abbreviations and it will generate the code

Creating HTML elements using Emmet

1. li*3

   

2. ul>li*5

   

3. div.container>p*3