DEV Community

Rahul kumar parida
Rahul kumar parida

Posted on

Emmet for HTML

#webdev #beginners #productivity #html

What do you think when you here HTML . Ohh!! those long lines of tags each having there own personal attribute and writing them manually is like doing something that is not as prodocutive as it looks , No offence to HTML coders.

If you used VS code from the start you won’t understand the pain of writing HTML on notepad manually feels like the head is gonna burst. But my friends thanks to  Sergey Chikuyonok who developed Emmet a HTML shortcut provider before Emmet existed people used to manually write the complete HTML and CSS **** by themselves which was tiring and boring so Sergey thought of making this to help a lot of developer all over the world in 2012 .

Emmet is a plugin which helps us to write code much efficiently and easily than ever before.

So how it works?

It uses the logic of abberviation syntax in simple words tagName{and some command then}. This improves the learning of HTML beginner much faster and easy to understand without writing the entire block by themselves.

So how does is work?

In VScode you might have noticed that whenever you type something in HTML there are some utilities you find out like creating a class and div using a single line , ever wondered how does that happen and how we can do that . Well that is the magic of emmet.

Let start by giving some basic commands to start:

1. When you type ‘!’ in HTML file in VScode and click enter:

   !
Enter fullscreen mode Exit fullscreen mode

doctypehtml

You see the arrow mark when you click ! command the top written Emmet Abbreviation if you click enter it automatically writes all that for you. This is the complete HTML boilerplate used while creating a page and is common so we ‘!’ this to get the boiler plate.

2. Let say you want to create div with a classname and id :



    div.someclassname#someID
Enter fullscreen mode Exit fullscreen mode

divcalssID

divclassid2

3. If you want to create a nested fields:


        div>span*5.span
Enter fullscreen mode Exit fullscreen mode

divspans

4. Similarily adding custom attribute using ‘[]’ :


    div[idea="0000"]
Enter fullscreen mode Exit fullscreen mode

div00

5. You can also create nested + siblings elements using + and >:


    div>span>a^h1+h2
    div>(span>a)+h1+h2
Enter fullscreen mode Exit fullscreen mode

divspanh2

‘>’ means it is nested or children element and ‘+’ means they are sibling elements. ‘^’ means to to upper parent and be there sibling

if you use (tag>tag) you are creating a sibling with thier own custom properties inside them.

These are some examples there are more but these are the fundamentals of the one you willbe requiring as a starter and will enjoy more as you go deeeper.

That’s it that’s the work of an emmet it is a plugin helps you to write HTML faster and efficiently.

Thank you for reading this!! Would love to have your feedback on this!!

Top comments (0)