A Quick Introduction to Emmet

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 1Auto-tag completion: type the tag and press tabYou’re probably unimpressed at this point.

But wait — there’s more.

Stage 2Insert id names using the # operator.

Insert class names using the .

operator.

Insert inner text using braces.

Have I got your attention?Stage 3Insert custom attributes and values using brackets.

Nest children using the > operator.

Insert siblings using the + operator.

Now we’re talking, amirite?Stage 4Multiply nodes using the * operator.

You can group with parenthesis and multiply groups themselves.

Yup, that’s right.

Stage 5Number 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 6Finally, 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 7Putting it all together.

Look at all the HTML I can write with a line of Emmet.

No indenting and no fuss.

Seeing is believing.

ConclusionEmmet 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:Official Emmet SiteOfficial Emmet Cheat Sheet.

. More details

Leave a Reply