Menu Search
Jump to the content X X
Smashing Conf San Francisco

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

High-Speed Coding Goodbye, Zen Coding. Hello, Emmet!

Back in 2009, Sergey Chikuyonok wrote an article1 to present a new way of writing HTML and CSS code. This revolutionary plugin, called Zen Coding, has helped many developers through the years and has now reached a new level.

Emmet2, previously known as Zen Coding, is the most productive and time-saving text-editor plugin you will ever see. By instantly expanding simple abbreviations into complex code snippets, Emmet can turn you into a more productive developer.

For those who prefer to watch instead of read, here is a summary of my favorite tricks.

How Does It Work? Link

Let’s face it: writing HTML code takes time, with all of those tags, attributes, quotes, braces, etc. Of course, most text editors have code completion, which helps a lot, but you still have to do a lot of typing. Emmet instantly expands simple abbreviations into complex code snippets.

HTML Abbreviations Link

Initializers Link

Getting started with a new HTML document takes less than a second now. Just type ! or html:5, hit “Tab,” and you’ll see an HTML5 doctype with a few tags to jumpstart your application.

Emmet Demonstration - Initializers

  • html:5 or ! for an HTML5 doctype
  • html:xt for an XHTML transitional doctype
  • html:4s for an HTML4 strict doctype

Easily Add Classes, IDs, Text and Attributes Link

Because Emmet’s syntax for describing elements is similar to CSS selectors, getting used to it is very easy. Try mixing an element’s name (e.g. p) with an identifier (e.g. p#description).

Emmet Demonstration - Classes and IDs

Also, you can combine classes and IDs. For example, will output this:

<p class="bar" id="foo"></p>

Now let’s see how to define content and attributes for your HTML elements. Curly brackets are used for content. So, h1{foo} will produce this:


And square brackets are used for attributes. So, a[href=#] will generate this:

<a href="#"></a>

Emmet Demonstration - Texts and Attributes

Nesting Link

By nesting abbreviations, you can build a whole page using just one line of code. First, the child operator, represented by >, allows you to nest elements. The sibling operator, represented by +, lets you place elements near each other, on the same level. Finally, the new climb-up operator, represented by ^, allows you to climb up one level in the tree.

Emmet Demonstration - Nesting operators

Grouping Link

To effectively take advantage of nesting without turning them into a confusing mess of operators, you’ll need to group some pieces of code. It’s like math — you just need to use parentheses around certain pieces. For example, (.foo>h1)+(.bar>h2) will output this:

<div class="foo">
<div class="bar">

Emmet Demonstration - Grouping

Implicit Tag Names Link

To declare a tag with a class, just type div.item, and then it will generate <div class="item"></div>.

In the past, you could omit the tag name for a div; so, you just had to type .item and it would generate <div class="item"></div>. Now Emmet is more intelligent. It looks at the parent tag name every time you expand the abbreviation with an implicit name. So, if you declare .item inside of a <ul>, it will generate <li class="item"></li> instead of <div class="item"></div>.

Emmet Demonstration - Implicit tag names

Here’s a list of all implicit tag names:

  • li for ul and ol
  • tr for table, tbody, thead and tfoot
  • td for tr
  • option for select and optgroup

Multiplication Link

You can define how many times an element should be outputted by using the * operator. So, ul>li*3 will produce:


Emmet Demonstration - Multiplication

Numbering Link

What about mixing the multiplication feature with some item numbering? Just place the $ operator in the element’s name, the attribute’s name or the attribute’s value to output the number of currently repeated elements. If you write ul>li.item$*3, it will output:

  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>

Emmet Demonstration - Numbering

Try It Now! Link

Why not try it right now? Go ahead: type in an Emmet HTML abbreviation, and hit the Tab key.

CSS Abbreviations Link

Values Link

Emmet is about more than just HTML elements. You can inject values directly into CSS abbreviations, too. Let’s say you want to define a width. Type w100, and it will generate:

width: 100px;

Emmet Demonstration - Values

Pixel is not the only unit available. Try running h10p+m5e, and it will output:

height: 10%;
margin: 5em;

Here’s a list with a few aliases:

  • p → %
  • e → em
  • x → ex

Extra Operator Link

You already know many intuitive abbreviations, such as @f, which produces:

@font-face {

Some properties — such as background-image, border-radius, font, @font-face, text-outline, text-shadow — have some extra options that you can activate by using the + sign. For example, @f+ will output:

@font-face {
  font-family: 'FontName';
  src: url('FileName.eot');
  src: url('FileName.eot?#iefix') format('embedded-opentype'),
     url('FileName.woff') format('woff'),
     url('FileName.ttf') format('truetype'),
     url('FileName.svg#FontName') format('svg');
  font-style: normal;
  font-weight: normal;

Emmet Demonstration - Extra operator

The CSS module uses fuzzy search to find unknown abbreviations. So, every time you enter an unknown abbreviation, Emmet will try to find the closest snippet definition. For example, ov:h and ov-h and ovh and oh will generate the same:

overflow: hidden;

Emmet Demonstration - Fuzzy Search

Vendor Prefixes Link

CSS3 is awesome, but those vendor prefixes are a real pain for all of us. Well, not anymore — Emmet has abbreviations for them, too. For example, the trs abbreviation will expand to:

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

Emmet Demonstration - Vendor Prefixes

You can also add prefixes to any kind of element. You just need to use the - prefix. So, -super-foo will expand to:

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

What if you don’t want all of those prefixes? No problem. You can define exactly which browsers to support. For example, -wm-trf will output:

-webkit-transform: ;
-moz-transform: ;
transform: ;
  • w-webkit-
  • m-moz-
  • s-ms-
  • o-o-

Gradients Link

Speaking of annoying CSS3 features, we cannot forget gradients. Those long definitions with different notations can now be easily replaced with a concise, bulletproof abbreviation. Type lg(left, #fff 50%, #000), and the output will be:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

Emmet Demonstration - Gradients

Try It Now! Link

Had enough of the animated GIFs? Go ahead — type an Emmet CSS abbreviation, and hit the Tab key.

Extras Link

Lorem Ipsum Link

Forget about those third-party services that generate “Lorem ipsum” text. Now you can do that right in your editor. Just use the lorem or lipsum abbreviations. You can specify how many words to generate. For instance, lorem10 will output:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

Emmet Demonstration - Lorem Ipsum

Also, lorem can be chained to other elements. So, p*3>lorem5 will generate:

<p>Lorem ipsum dolor sit amet.</p>
<p>Voluptates esse aliquam asperiores sunt.</p>
<p>Fugiat eaque laudantium explicabo omnis!</p>

Customization Link

Emmet offers a wide range of tweaks that you can use to fine-tune your plugin experience. There are three files you can edit to do this:

And A Lot More! Link

This is just the beginning. Emmet has a lot of other cool features, such as encoding and decoding images to data:URL6, updating image sizes7 and incrementing and decrementing numbers8.

Go check out the new website9, the awesome documentation10 and the handy cheat sheet11!

Supported Editors Link

If you are wondering, “Will it work in my text editor?,” The answer is, “Oh yes, my friend!” A lot of editors are supported, and I hope you find yours in the list below.

And You? Link

What are your favorite tricks? Leave a comment below. Now it’s your turn to share your favorite tricks.

(al) (ea)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23

↑ Back to top Tweet itShare on Facebook


Zeno Rocha is the author of some cool open source projects like Browser Diet, jQuery Boilerplate and Wormz, a HTML5 Chrome Experiment. He used to work as a software developer at Petrobras (the largest company in Latin America) and (the most accessed sports website in Brazil). Now he's a Front-end Engineer at Liferay and co-founder of BrazilJS Foundation.

  1. 1

    This is good stuff. I personally think it saves you a lot of time. But I still prefer sticking to the classic way as it works for me and has worked for me in the past while developing/designing large projects. I am of the idea that too much automation isn’t always good.


    Ali Gajani
    Founder at Mr. Geek

    • 2

      That’s nice, but I really like to discover new tools to make me more productive :)

      • 3

        Classic way?
        Why not to return to Windows notepad?
        It’s just awsome. I’ve already installed it. Thanks for searching it out!

      • 4

        Hi, Zeno, how are you? Thanks for your comments. I have a question for you. Do you know where I can find all presentations files (ppt, etc) for the FrontIn BH 2013 event? Thanks.

    • 5

      @Ali: Why in this case It wouldn’t be good? If you already know how the HTML and CSS syntax works, why not to save some time? You are still coding and have the control of what you are doing. I personally think is very good idea, like Markdown, Halm and others.

    • 6

      yeah, it’s not automation. it’s keyboard shortcuts. join the CTRL+C revolution…

    • 8

      my opion on the matter is a coding environmentex.sublime text3,dreamweaver needs to be dynamic and involve user expandability to allow for changes in languages and techniques.
      this is one reason i love emmet alot of people swear by notepad thats great but I can type more acuratly and faster with sublime text 3 on the default settings (more so customised).
      my advise would be give emmet a ago also tryout sublime text 3 youll proably want to follow some tutorials on how to set it up and some packages to install.
      my package setup in sublime text 3 is:
      advanced new file:

      there are some others but these are the ones I use the most. Sublime is amazing from a new webcoders perspective combine that with live-page in chrome so you can watch your page update as you code.

    • 9

      automation to speed up typing is always great. As long as it can be remember and in this sense it looks like you can. But if your still doing things via notepad or notpad++ then i’d assume your taking forever to complete your projects.

    • 10

      So what is the plug-in for !!!!!!???? That’s a detail that should be crystal clear in the first two lines of the article. I’m not going to waste my time going further with this.

      Looks like you’ve got a lot of great magic going on there. Wish I knew what it was for.

  2. 12

    Gunnar Bittersmann

    March 26, 2013 4:47 am

    This surely might save a lot of typing.

    But more than one and a half year after the syntax of gradients has been changed, there are still tools around that generate wrong CSS? cf.

    Fix that bug, please.

  3. 13

    OMG! I have been coding html pages for the last 4 years I never used these cool things. you made my day. Thanks!

  4. 15

    Or you can just learn how to touch type.
    By definition any short cutting system like this might save you a few keystrokes but at the same time removes any practice you would get in overall learning the ins and outs of complex syntax. Also it isn’t portable. And of course you don’t get the chance to actually think about what you are doing.
    Finally and this is the most important point, increasingly pages are rarely just some bit of HTML. They are generated by the server and the page source or parts of the source is written in some programming language. The more removed you are from this the harder it is to switch back and forth from HTML to CSS to php to SQL etc.

    • 16

      I think the rule of thumb for tools like this should be that they are for experienced developers; those that already no the ins and outs of complex syntax.

      I mean if you look at how the tool works it already requires a somewhat solid understanding of CSS in order to be really useful. Essentially it just acts as a more robust version of autocomplete. Would we argue that autocomplete is bad because it removes the need for developers to type out every character of ? Not really. It’s just a productivity tool that you can take or leave and you’re code is tied to it’s use. I could use it today, abandon it tomorrow, and I don’t have to refactor or recode anything.

      That’s what confused me when you talked about portability. When I think of portability I think of some chunk of my code that absolutely relies on a tool. For example my .less files. I really MUST have a lesscss compiler to use them, so they’re not very portable if didn’t want to use a less compiler or went to a system that didn’t have less installed. The difference with Emmet is it just lives in the editor. It’s not producing a separate file that you have to push through some preprocessor or compiler. If you edit an HTML file in conjunction with an Emmet plugin the result is an HTML file that you can then edit in any other HTML editor (just without the benefit of Emmet autocompletion). So the output is still very portable. Plus given the number of tools and languages supported it looks like it should be pretty easy to find a suitable editor/plugin on any Win/*nix/iOS platform.

      I think the model you are talking about, regarding server side generated code isn’t absolute. In fact in my organization if you generate HTML in your server side code you are asking for a failing grade come code review. All the HTML should be in clean little templates with no server side code in them at all. No HTML mixed into your controllers or business objects, no CSS stuffed in some POJO.

      Are the chunks of HTML smaller? Is it more modular and less all-encompassing? Is there less need for hand coding large chunks of HTML? Yes. Yes. Yes. But that doesn’t negate the usefulness of Emmet toward reducing the amount of typing required for even those small chunks of templated code that will be reused to produce larger more complex output.

      Now if you are talking about abstraction frameworks that completely separate the developer from the output. I’m right there with you. I think there becomes a disconnect for the developer between what they type in one language and what gets processed, compiled, transformed and shot out the other end. I don’t feel Emmet falls into this category, since what it produces is available almost immediately in the editor. So you are seeing the real code in (near) real-time and that lowers the amount of abstraction that occurs. Developers still see the HTML, can still handcode and modify the HTML, and aren’t saving some abstract 3rd party .emmett file to be processed at a later date.

    • 17

      I know it’s 2 years later but everything you wrote is wrong.

  5. 18

    Definitely a must-use for front-end developers! I’ve been using it for years now and it’s really time saving.

  6. 19


    March 26, 2013 3:49 am

    A NetBeans plug-in would make it perfect. Really love it, makes life so much easier.

  7. 22

    This is similar to the yasnippet system in emacs. It’s a great timesaver.

    • 23

      Really? I haven’t used emacs yet, but I’m glad to hear that, so I can recommend to my friends :)

  8. 24

    Just installed it for Notepad++ – this is AWESOME!

    • 25

      plz tell me the procedure, not working for me….

      • 26

        Hit Ctrl, Alt and Enter/Return together after typing in the shorthand code.
        This will expand the shorthand code to its fuller form.

  9. 27

    Luís Fernando

    March 26, 2013 4:37 am

    Great post!

    I just install the plugin. It’s awesome.

  10. 29

    Aron @ RedRocketWebWorks

    March 26, 2013 4:47 am

    A must have plugin for any web developer. Other than the name change, does Emmet bring any additional features to the table?

  11. 31

    Try it on JSFiddle! Just hit Tab to complete the code.[tab]

  12. 32

    Bruno Passos

    March 26, 2013 1:59 pm

    Artigo fantástico Zeno! Mandando ver. Eita orgulho infame! :) abraço

  13. 34

    Check out PHPstorm 6 by Jetbrains it now also supports emmet:)

    • 35

      Would you happen to know how to do the autocomplete on gradients in phpstorm 7.1 ? I have looked every where.

  14. 36

    This makes me feel warm and fuzzy inside. I’m really looking forward to getting home and trying it out tonight.

  15. 37

    No textmate2 plugin? :-( please? :’-(

  16. 39

    Zeno, great work!

  17. 41

    David Fregoli

    March 26, 2013 6:02 am

    Good stuff, going to give it a try on Sublime!

    • 42

      Go ahead, Sublime + Emmet is the most productive workflow ever :)

      • 43

        Agree 110%, I have been using it with Sublime and is really helpful.
        Note: It would be nice that width CSS property have greater precedence than widows, when I tip “wid” and press tab

      • 45

        Sublime + Emmet + LESS (SASS/SCSS or other preprocessor) is even better :)

  18. 46

    great work! looks like a wonderful timesaver.

    • 47

      For sure, give a try and then tell me what you think :D

      • 48

        Tried it out in Espresso and it looks great. It is def a time saver, especially when it comes to making lists and tables. I appreciate it when anyone puts out an Espresso sugar. Thanks!

  19. 49

    Very nice. I can’t wait to try the HTML portion of this plugin out on my next project. Thanks, Zeno.

  20. 50

    Awesome ! Thanks…


↑ Back to top