A Quick Introduction to Emmet

… as told through the 7 stages of Vince McMahon.

Ethan Nam
Ethan Nam
Apr 12 · 4 min read
The 7 stages of Vince McMahon meme applied to Xboxes

Do you like writing HTML? Probably not. Writing HTML doesn’t feel like programming. It seems less problem solving and more editing. You spend the bulk of your time indenting, closing tags, wrapping blocks of HTML in a div, indenting, indenting, and indenting some more.

So, what if I told you I could cut down the time you spend writing HTML in half? Take half the time you would’ve spent writing HTML from now until the rest of your life and place it back in your hands for you to do with what you will?

Meet Emmet — a plugin that greatly improves HTML and CSS workflow.

Let’s walk through what Emmet can do:

Stage 1

Auto-tag completion: type the tag and press tab

You’re probably unimpressed at this point. But wait — there’s more.

Stage 2

Insert id names using the # operator. Insert class names using the . operator.

Insert inner text using braces.

Have I got your attention?

Stage 3

Insert custom attributes and values using brackets.

Nest children using the > operator.

Insert siblings using the + operator.

Now we’re talking, amirite?

Stage 4

Multiply nodes using the * operator.

You can group with parenthesis and multiply groups themselves.

Yup, that’s right.

Stage 5

Number items using the $ operator.

You can get very creative with the $ operator. Below, I make an h1, h2, h3, and a h4 tag, attach myclass1, myclass2, myclass3, and myclass4 to each repestively, and insert inner text of Header 1, Header 2, Header 3, and Header 4.

Oh yeah.

Stage 6

Finally, wrap any block of text by pressing CTRL + W, bringing up the wrap with abbreviation field, and typing in any combination of emmet commands you want.

You can easily wrap a block of HTML with a div like this. I add an id for good measure.

Knowing you never have to indent ever again to wrap HTML in a div.

Stage 7

Putting it all together. Look at all the HTML I can write with a line of Emmet. No indenting and no fuss.

Seeing is believing.

Conclusion

Emmet is a powerful tool that can save you the tedious task of editing HTML. It can even do CSS, which is not covered here.

If you’re interested, check out their official website below where you can donate to the team. I’ve also linked to a cheat sheet where you can see what else Emmet can do.

References:

  1. Official Emmet Site

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade