Emmet: a necessary plug-in in writing HTML and CSS

Faye Yujing Ma
Jul 30, 2017 · 2 min read

Emmet is a powerful plug-in that combines the abbreviations in both HTML and CSS. The speed of coding will be improved a lot after installing the plug-in. Even though coding is not as time-consuming as thinking, it’s still exciting that the plug-in could make our typing faster and easier.

There is an article published on SmashingMagazine that introduce the ways to use emmets specifically:

If you found that you already fall in love with the plug-in, youu can visit their website:

Here Are Some Abbreviation in HTML by Emmet:

  • html:5 or ! for an HTML5 doctype
  • html:xt for an XHTML transitional doctype
  • p.bar#foo turns to:
  • a[href=#] turns to:
  • ul>li*3 turns to:
  • lorem10 turns to:

Here Are Some Abbreviation in CSS by Emmet:

  • w100 turns to:
  • ov:h turns to:

They’are just some examples, you can find more shortcuts in here:

Hope you will enjoy your emmet journey! :-D

    Faye Yujing Ma

    Written by

    Web Developer, Urban Designer, Music Lover

    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