Emmet Abbreviations

Emmet Abbreviations

Tags
Software Development
HTML
Productivity
Published
Published January 4, 2023
Author
Due Date

What are Emmet Abbreviations?

Hey there, web developers! Are you tired of typing out those long, tedious HTML and CSS tags?
Fear not, because Emmet abbreviations are here to save the day!
 
Emmet abbreviations are a set of shortcuts that allow you to quickly write code. For example, if you type "div.container" and press the expansion key (enter), Emmet will automatically expand it to:
<div class="container"></div>
 

Emmet abbreviations that nest and repeat elements

But seriously, Emmet can do so much more. You can use it to nest elements, add attributes, and even repeat elements with a simple multiplier.
 
Here is another simple example. Typing "ul>li*5" and pressing the expansion key will give you:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
You can write the same HTML with 10% of the keystrokes. And, you can use them for CSS too!
 
Give Emmet a try, and let me know how much time you save! You'll be able to use all that extra time to work on more meaningful things.
 

Demo of Emmet abbreviations in VS Code

Here is a small demo that uses Emmet abbreviations in VS Code
notion image
 

Further reading