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

Did you also feel tired while opening and closing the HTML tags ?

Let me tell you there is a tool that will help you to code fast and do these tired task for you .

Its Emmet

In this blog we will discuss :

• What Emmet is (in very simple terms)
• Why Emmet is useful for HTML beginners
• How Emmet works inside code editors
• Basic Emmet syntax and abbreviations
• Creating HTML elements using Emmet
• Adding classes, IDs, and attributes
• Creating nested elements
• Repeating elements using multiplication
• Generating full HTML boilerplate with Emmet

Before jumping into the blog , I strongly recommend you to read this 👇

Understanding HTML Tags and Elements

Kunal ・ Jan 29

#webdev
#html
#programming
#tutorial

Emmet

Emmet is a plugin or developer tool that helps make your work faster and efficient by enhancing HTML and CSS workflows .

Great news for you it is pre install in VS code if you are using it .

Let me give you an example , If you want to write the long boiler plate for HTML you just have to use !

And you press the tab button it will look like this :

As you can see it save your time and effort .

Why Emmet is useful for HTML beginners ?

It allows the beginners :

1. Write faster
2. Less Errors
3. Easy to learn
4. Build confidence

How Emmet works inside code editors

Emmet works by watching your code what you are typing and it will convert shortcut into full code

Instead of writing this manually :

You just type :

ul>li*5

Then press the tab button, Emmet creates the full code for you .

Basic Emmet syntax and abbreviations

Emmet uses syntax similar to CSS selectors to write HTML faster .

We can use Emmet to generate nested HTML element ( element inside element ) and quickly HTML attributes

There are several types of operators

1. Nesting Operators

It is used to generated element inside element mean :

div>ul>li

…will produce

2. Multiplication

With * operator you can define how many times element should be repeated

ul>li*5

…outputs to

Adding classes, IDs, and attributes

In CSS , you use #id and .class notation to reach the element with specific id or class attribute

In Emmet , you can also use the same syntax to add these attribute to specific element :

1. Adding id attribute to an element

div#header

… will output

2. Adding class attribute to an element

div.page

… will output

You can use both of them collectively

div#header+div.page+div#footer.class1.class2.class3

will give

Generating full HTML boilerplate with Emmet

If i tell you to write this :

It might feel very tiring and take a lot of time to write this, and there is also a chance you might make mistakes.

So , you can use Emmet to generate this HTML boiler plate easily by just pressing ! . It will generate :

And you press the tab button it will look like this :

As you can see it , save your time and effort .

There are many abbreviations present, so don’t get overwhelmed. You will eventually learn them by using them more and more.

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

Kunal Follow

My tokens expired idk how to write bio. 😪🫠