Skip to Content
What Is Emmet and How Do I Use It?

What Is Emmet and How Do I Use It?

Emmet is a set of keyboard abbreviations that will automatically convert to the language you’re using them with. Although that may sound confusing, it’s a lot simpler than it sounds. Emmet allows you to type less and create code more quickly. It is simply a list of shorthand keystrokes that will fill out as HTML, CSS, and other languages. Checkout the Emmet Cheat Sheet here to see all of the available languages and to get started. Let’s dive right in to see Emmet in action.

Estimated reading time: 4 minutes

Using Emmet in VS Code

Emmet comes standard in VSCode. You can checkout all of your Emmet settings by navigating to Code > Preferences > Settings and search Emmet like this:

emmet settings in vscode

Using HTML Abbreviations

Let’s dive into using Emmet Abbreviations for HTML. If you type div.content like this below, then hit tab, you’ll end up with a div with a class content.

div dot content is written

See the div with the class content below. Inside this div, I’ve typed main and I’m going to hit tab.

div with a class of content has main written inside of that

Now I have a main tag inside my content container. And that’s it really. Utilizing the cheat sheet linked above you can code faster and easier to build whatever your heart desires.

div with class content holds a main tag and the word aside is inside of that

Insert Lorem Ipsum with Emmet

Probably one of the coolest commands you can use is inserting dummy text with Emmet’s Lorem commands. For instance, if you enter p*5>lorem and hit tab/enter in your VSCode editor, you’ll get 5 paragraphs of dummy text.

Check out how I inserted an h1 tag and 5 paragraphs with these commented out commands below:

Side Note; You can use Emmet in your CodePens:

CodePen is a great place to test Emmet Abbreviations. You can start by typing an exclamation point in the html section of your codepen. You’ll see the code suggestion show up. Hit Tab and voila, you have yourself an HTML5 document template!

in codepen an exclamation point has a full html5 document template as a suggestion

Use Emmet CSS Abbreviations

For the CSS Abbreviations examples I’m using VSCode. As you’ll come to find out, VSCode and Emmet will give you suggestions when you use Emmet. I like this feature a lot.

In my .content element, I type bg and immediately get a suggestion for my background property. I can hit tab and change the hex as simple as that!

content element shows a backgrounf color with a hex code for black for the emmet abbreviation

If I type bgc:n and tab to set the background color to none.

content shows a background color none suggestion emmet abbreviation

I can also set the display of this element to flex by typing d:f . Pretty great right?

class content shows a display flex suggestion emmet abbreviation

Conclusion

After reading this article, hopefully you have an understanding and the tools necessary to get started using Emmet today! It’s a fun and easy tool that can save you a ton of time in the long run. Check out more ways to make your coding life easier.

Photo by Valery Sysoev on Unsplash