You Should Learn Emmet Abbreviations

It can save you so much typing work when writing HTML, XML, or JSX

Photo by Mariko margetson on Unsplash

Emmet abbreviations are probably implemented in one way or another in your current IDE. Even for Vim there are multiple plugins that give the user access to this powerful tool (especially for web developers!). But what exactly is it, and how can I use it to be more productive?

What are Emmet abbreviations and How to use them?

Emmet abbreviations are a way to quickly write out an HTML (or XML / JSX) structure. It uses the symbols commonly used in CSS to add structure and/or properties. Let’s take the following example:

The string on line one might look like a bunch of nonsense, but split up into smaller bits we might get it.

• html is our starting element. Our root for this structure.
• >head+body means we add the head+body elements as children to our html tag. Remember that > is the child selector in CSS, and + is the sibling selector.
• Inside our body we then add div.header which translates to a div with class header .
• We then add more elements as siblings of our div . Still inside the body .

Emmet Abbreviations are mostly useful for smaller snippets. Especially if your IDE adds tab stops to each final node, you can create some amazing HTML without ever needing to touch the arrow keys (or hjkl for the Vim powerusers) or your mouse. Let’s check the following example:

We use another new symbol here, the * , the asterisk allows us to create a certain element a given number of times. This is insanely useful for lists and table rows or cells.

And you might think that it’s annoying to go back to each element to fill the tags with content, remember, most advanced editors will add tab stops between each element without children. So each li in this case.

You can you enter your content and hit tab to go to the next one.

Conclusion

Emmet abbreviations are a powerful tool in any HTML or JSX coder’s toolbox. It simply speeds up development. You can read more about it here.

Thank you so much for reading and have an excellent day.

I am not a part of the Medium partner program anymore so I don’t earn anything from this. Give me a follow and help me spread knowledge for free.

Follow me on Twitter (X) and here on Medium to keep up with me and my projects.