Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. 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 London, dedicated to all things web performance.

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…

  21. 51

    Its awesome.. but its not working directly in Visual Studio 10.. :( …. any way to make this in VS ???

  22. 54

    George Hewitt

    March 26, 2013 6:19 am

    This is a super time saver THX!

  23. 55

    Markus Fischer

    March 26, 2013 6:26 am

    Great article. I use it in Sublime Text 2. It saves me a lot of boring time typing code. I love it.

  24. 56

    Lucas Cavalcanti

    March 26, 2013 6:29 am

    o/, thankfully something like sparkup the textmate :)

  25. 57

    Reading this, looks great, then I get to the bottom and…no Coda support. Are there any plans for Coda support?

    Would love to use this.

  26. 59

    Thank you for providing the in-article Emmet sandboxes. They let me answer my own question:
    Q – “What about an alias for rem units?”
    A – Yup, Emmet’s got that covered! m5r → margin: 5rem;

  27. 60

    Gilberto Ramos

    March 26, 2013 6:38 am

    Great job!! I will use Emmet with Sublime :D

    Also, it would be great if Emmet could reach NetBeans!

    Obrigado irmao..!

  28. 61

    Jeremy Carlson

    March 26, 2013 6:40 am

    Nice article. I liked Zen when I first saw it, but for some reason I never used it after testing it out. Reminds me of Jade even though after you type the abbreviation it turns to full HTML. Jade/Haml would remain the abbreviation.

  29. 62

    Great Zeno! Thanks

  30. 63

    I’ve been using Sublime Text 2 for the past 2 days and just found this was installed with it. After 10 minutes of ‘playing about’ I can tell that this is going to save hours of time. I’ve just knocked up a HTML5 document in 2 minutes!

    Bye bye Dreamweaver

    • 64

      So happy to hear that, Sublime rocks! o/

    • 65

      Its about 6 months i said good bye to dreamweaver and still enjoying sublime text 2 alot than before..

  31. 66

    Ole Marius Loeset

    March 26, 2013 7:05 am

    The HTML part of Emmet is supported in Web Essentials extension for VS2012. Should definitively be added to the list :-)

    For reference, see:

  32. 67

    Anyone looking for Emmet for Coda (1.6/2.x), here is the link to the plug-in:

  33. 68

    Good article !
    But what’s diffrence between zen coding and emmet ? Just another name ?

    • 69

      Zen Coding has been deprecated, only Emmet will be supported for now.

  34. 70

    I have been using this for awhile in production and have started training other team members on it. HTML is a joy to write, especially when you can do it shorthand. We all have deadlines and other projects, but this is a great productivity hack. Glad you shared it with the community. There are lots of other Sublime add-ons that allow rapid coding as well.

  35. 71

    Jean-Marc Buytaert

    March 26, 2013 7:44 am

    I have been using Sublime Text 2 with Emmet for quite a while now, and it has been such a time-saving tool, I haven’t felt this productive since I started using it.

  36. 72

    Eric Crowley

    March 26, 2013 7:46 am

    While this plugin looks great for people who generally use other text editors, nothing can really beat Vim in terms of overall productivity and shortcuts/text expansion. Everything is so customizable, and the premise of using multiple, repeating commands is built into the editor. d3d removes 3 lines, 2e moves to the end of the next word, 5> will indent your code 5 tab stops, “+3p will paste the clipboard register 3 times, etc.

    It has on the fly macro creation, code snippet expansion like mentioned above, external shell operations bound to shortcut keys (think: just a few button presses to deploy an entire batch of files or interface with source control) regular expression search/replace, and an incredibly unique layout interface. While in normal mode, you can move quickly through the code to get to the point you need to be, hit c3w to clear the next three words, and start typing in new text from there. Shift-c will clear the rest of the line, dst will delete surrounding tag but keep the inner text; vi) will select anything inside the parentheses, selecting something and hitting s” will surround that text with quotes, etc.

    Vim has a huge learning curve, however, but once learned and set up for your preferences it vastly reduces coding time.

  37. 73

    just awesome,great work zeno…i hav been using phpEd nushpere…
    defiantly give it a try…seriously am very happy to such time saving stuff

  38. 74

    Jan Polášek

    March 26, 2013 7:57 am

    Wow! This is just awesome! I’ll start using it in Sublime.

  39. 75

    Christopher Hawkes

    March 26, 2013 8:27 am

    It’s a big fat waste of time, most editors already have similar features. Nothings worse than having to work around automation which is automating something you don’t want to be automated. Really how long does it take somebody writing 60 words a minute to type a few tags, no big deal really.

  40. 76

    Any plans to add it to Dreamweaver? I’ve been using the fan-created Dreamweaver Zen Coding, but it’s not working quite right in CS6, so I’m still stuck on CS5.5.

    I *could* switch to one of the editors that supports Emmet, but I do a lot of html emails, and Dreamweaver’s split-design-view makes that task so much easier (don’t hate… I only use split-view for emails, but never full websites)

  41. 78

    It is unbelievably awesome!
    imagine coding an entire header area with just this one line : header.myheader>div.logo+nav.mynav>ul#menu>li*5
    lol :p

  42. 79

    Really awesome, congratulations.

  43. 80

    It’s like liking HTML over again

  44. 81

    Haml, Sass, bourbon, Middleman app. These 4 combined make the world a better place.
    No need for guessing, just correct sorting while you code.

  45. 86

    Gustavo Freitas

    March 26, 2013 10:34 am

    Great words Zeno!
    I’m a Java Developer and I’m working with this workflow before going deeper in jsp files.
    Keep the good work, thanks!

  46. 87

    Leandro Soares

    March 26, 2013 10:34 am

    Great work! I have a question,
    where I can find the shortcuts used in sublimetext?
    I’m trying to change the notepad++ to match.

  47. 89

    Just to let you know: PHPStorm provides Emmit Support too.

  48. 90

    I’ve been using this for a while. One of the great features that no-one has mentioned yet is auto commenting. For a decent read:

    The short version, if you add ‘|c’ after your other stuff you get close comments, which can be customized. I find this very helpful in keeping stuff organized.

  49. 91

    That is really useful indeed and if you get the chance to watch a tutorial to learn some sublime text 2 shortcuts & commands then you’re gonna increase your development speed a lot.

    Thanks for the info.

  50. 92

    I really love it and give it a try thank you for sharing this.

    But one question i have , the reference/examples you used in this article;
    Can i have a window inside my editor (notepad++) where i can see the shortcuts?

    • 93

      I don’t think so Hennry, but you could pin a tab in your browser with Emmet’s Cheat Sheet.

  51. 94

    Too bad it doesn’t support Visual Studio :(

  52. 95

    Brian Gelhaus

    March 26, 2013 12:22 pm

    Most of Emmets code snippets I already have created myself. I’d rather make my own and customize myself anyway. Emmet is silly…

  53. 96

    Well. I find Coda Clips better. I can easily make my own code snippets (clips) and assign key triggers. That way I can control what I actually need, and i can also add snippets with som php for my prefered cms or whatever I wan’t.

    • 97

      Seems cool, I haven’t heard about it yet, maybe I’ll give it a try :)

  54. 98

    Do you maybe plan to release version for Dreamamweaver ?

  55. 101

    A revolution!
    Thank you so much for sharing this!

  56. 103

    Dylan Valade

    March 26, 2013 3:43 pm

    Just installed Emmet on Brackets (sprint 22) from the Github repo and can’t believe how simple it is to use. It makes me smile every time I click tab. This is huge.

  57. 105

    Phil Derksen

    March 26, 2013 4:00 pm

    Great overview! I definitely need to incorporate this more into my workflow.

    Don’t forget to add WebStorm to the list of editors that support Emmet.

  58. 106

    Just installed for Sublime. That is wonderful. Thank you SM!

  59. 108

    This is an amazing tool, still I don’t see the benefit of using this. It looks like it can save you time when codding, but I think you waste more time with learning how to use the tool/shortcuts. Plus in time if you over use this tool you become dependent of it and may forget to write the actual HTML / CSS code.

    • 109

      When I first met Zen Coding my opinion was just like yours. But when you get started you see that is very easy to learn (it’s not hard like Vim’s shortcuts) and it’s impossible to forget HTML/CSS if you’re a developer.

  60. 110

    Still waiting for BBedit support. is that entirely possible? :)

  61. 113

    Hi, and tnq Zenno for this helpful post.
    I wanna to translate your article to Persian (Farsi, the language of iran), and I need your permission to do that, tell me if you accept with me!

    • 114

      That would be great! Go ahead man and let me know when you finish it :D

      • 115

        Tnq sincerely Zeno!
        I will do my best and I have to say that I didn’t think you answer me in this speed! (my idea is you’re NFS pro!!!)

        • 116

          That’s awesome! Thanks for doing that. I’ll share it on Twitter :)

  62. 117

    Martin Harvey

    March 27, 2013 1:34 am

    I’ve been using Zen Coding/Emmet for a while now, and it has got be one of the best packages I’ve installed into Sublime Text 2. My only problem is that I forget that I’ve got it installed sometimes and also some of the abbreviations seem a bit obscure and aren’t easily remembered. But other than that it’s great and would recommend it to any developer.

    Until reading this post I didn’t even realise there was a Lorem Ipsum shortcut built into it.

    Thanks Zeno ;)

    • 118

      That’s awesome Martin, I also don’t remember many abbreviations (specially for CSS), that’s why I keep going to Cheat Sheet all the time.

  63. 119

    Ian Hunneybell

    March 27, 2013 2:43 am

    A great tool for improved productivity but like any such tool it needs to have time spent on learning (and remembering) the new syntax to be able to use it to best effect.

    Like many apps (e.g. Word & Excel!) we tend to use only a fraction of its functionality, but if it helps us to do more in our daily lives then it is a good thing.

    I remember using the Brief editor with C coding back 20+ years ago and being blown away by the automatic closing of braces when I typed an opening brace! Emmet keeps this tradition going.

    Well done Zero, keep up the good work.

  64. 120

    Łukasz Jakub Adamczuk

    March 27, 2013 3:33 am

    Looks great. I even didn’t used to Zen Coding and here is something more advanced. Some features are similar to CSS Pre-processors but it still useful. I know author from his browser-diet project.

  65. 121

    I installed TextMate 1.x (trial) and also Emmet but can’t get it to work. I tried various shorthands+tab but nothing happens. Any advice?

  66. 122

    Junior Magalhães

    March 27, 2013 8:44 am

    Zeno, 90 comments! Congratulations, ZOFE podcast is pretty good too! Vaiquevai Brasil!

  67. 124

    Its not working for me in Notepad++.. plz help

    Emmet plugin is showing in the plugin.. But yet it is not working…. What will be the problem? I done copying the ‘EmmetNPP.dll’ file to in the plugin folder and copied the ‘EmmetNPP’ folder to its config folder.

  68. 125

    This would really helps to write a code in very less time and with very less mistakes :)

  69. 126

    I’ve recently been using sublime text 2, jade & sass through codekit which have been great, this looks like another great option too!

  70. 127

    Hjalmar Snoep

    March 28, 2013 5:45 pm

    I tried: lg(up, #000 75%,#fff)
    in stead of your example with left. Didn’t work.
    lg(down, #000 75%,#fff) neither.
    lg(vertical, #000 75%,#fff) nope. So much for the fuzzy search.
    I can fix it manually, but if that’s an indication of how it works, hmmm.
    ctrl-c, ctrl-v takes hardly any time at all and it get’s me what I want.
    And I did like the name Zen coding better, sorry..

  71. 128

    I just install the notepad++ plugin. It’s awesome.

  72. 129

    Necolas Hamwi

    March 29, 2013 2:30 am

    I’VE JUST installed it for Notepad++ (like the most awesome editor!)
    Thank you Zeno,
    Hello Emmet!

    Really handy tool for designers / coders :)
    (i guess i could also use it on JSFiddle)

  73. 131

    Great article!

    But i cant get it to work in notepad++.
    Do any have an idea how to get it working.?
    Its installed and i can see it but when i try using it, it wont.?

    • 132

      I’ve seen a few comments here with folks having a hard time getting Emmet to work with Notepad++ The problem may be that one of the other plugins keyboard shortcut assignments is taking over the TAB key. Go into your settings -> shortcut mapper –> click the ‘plugin commands tab’ –> look for ‘expand abbreviation’ Now, click on it to select it, click the ‘modify tab’ use the dropdown list and try assigning another shortcut (I used the tilde ( ` ) key.)

      This worked for me. I’m using the ‘TAB’ key for another useful snippet plugin for Notepad++ called ‘FingerText’

  74. 133

    I guess I must be doing something wrong..I’ve installed in Notepad ++ but nothing happens?

  75. 135

    Awesome article loved

  76. 136

    Also works for DroidEdit.

  77. 137

    Any way to have it output self-closing single tags (‘ />’ instead of ‘>’ on an img, for instance)?

  78. 138

    This is really great time saver. Unfortunately, I am using dreamweaver and there is no plugin for it. I was thinking to start using Notepad++ , but Dreamweavers split screen /design & coding/ is very useful for me, so I can see the effect straight away and don’t have to open it in browser. Do you know if there is similar plugin for Dreamweaver?? Or is there the split screen option in Notepad++??
    Thank you

  79. 140

    thanks.really helpful. I had Emmet all this time in Notepad++, but never had a chance to explore its features. this article showed me how to speed up some of those repetitive tasks.

  80. 142

    Emmit is such a dream on Sublime Text. The drop down menus gives you the code to use if you forget. I have used Zen Coding for years and loved it

  81. 143

    Nice post bro… :)

  82. 144

    the “try it now!” is lovely,,

  83. 145


    April 1, 2013 2:16 am

    Pretty cool stuff… Thanks for sharing!!!

  84. 146

    Wow, that’s really interesting!

  85. 147

    Aamir Rizwan

    April 1, 2013 12:33 pm

    How do you make these beautiful animated gifs ?

  86. 149

    I’m using Zen Coding on VIM throught 3rd plugin developers. It’s saving time for me when I building some projects.
    I’m still not had a change to use full features of Emmet because It’s not official support VIM. I don’t know why but VIM is most popular text editor for developers.
    Founded at NARGA

  87. 150

    In case anyone is thinking “Da fook, it doesn’t work in Coda2!”. <- That was my initial thought. Somehow I first had to get into Emmet's preferences and sign the "Expand abbrevations by Tab key if possible".

    Works like a charm! I prefer just using Coda's snippets but every now and then it somehow just deletes it. So perhaps this'll do the trick.

    (let's not get started about iCloud sync)

  88. 151

    Amazing! I just installed it… I thought I could never do it.
    Using the proxy connection is a little bit tricky.
    Thanks bro ;)

  89. 153

    Julien Jolly

    April 2, 2013 11:35 pm

    Woaw, that’s great!
    I heard a lot about Zen Coding and Emmet but this tutoriel made me use-it (on Sublime Text 2).

    • 154

      I’m so happy to hear that Julien :)

      • 155

        I am using this in espresso but when I click tab nothing happens. I know its installed because if I go up to Actions > Emmet > Expand Abbreviation it works…any help?

  90. 156

    Karl Merkli

    April 3, 2013 6:20 am

    I use it since I bought ST2 (a year ago I think -> zencoding) and I can’t live without it anymore.

    I always try .CLASS in school and it doesn’t work (ofc we do not have emmet or zencoding there), I always get very sad :(

  91. 157

    Javier Díaz

    April 3, 2013 12:06 pm

    Great post!
    I just install the plugin. It’s awesome!! *O*

  92. 158

    Dibakar Jana

    April 4, 2013 2:45 am

    Wow!! Awesome… I love it.. It will save so much of my time. I am using SB2+emmit…

  93. 159

    I’ve got a new love. Brackets + Emmet
    Thanks Zeno!

  94. 160

    Arshad Ansari

    April 4, 2013 11:52 am

    This is amazing! I really like the transverse and selection of code. The quick code generation is great!

    I am just sad that it is not available for dreamweaver. It would have been really great if I could have used Emmet in dreamweaver.

    Great Post! Thanks for sharing

  95. 162

    Michael Parenteau

    April 6, 2013 9:36 pm

    A VIM bundle would be sweet.

  96. 163

    thanks for the stomach ache. i read most of the post , get somewhat interested to try it and then get to the bottom only to find a long list of mac and windows editors! sad and disgusting. similar to watching the US presidential campaigns: people being willingly enslaved. I guess i shouldn’t be so suprised since i had to wade through adobe #@^& to get here and there are 3 tracking scripts on this page. It’s a shame, because this site is a generally good resource. could you descum it every now and then please?

  97. 164

    Jaymelensonn Judan

    April 7, 2013 7:10 am

    Amazing, Thanks! :)

  98. 165

    I am using this in espresso but when I click tab nothing happens. I know its installed because if I go up to Actions > Emmet > Expand Abbreviation it works…any help?

    • 166

      For Espresso you have to hit control + E to expand the abbreviation and work from there … still not sure on how to change that hotkey to tab

  99. 167

    Jaspal Singh aka jsxtech

    April 10, 2013 3:40 pm

    Wow! Amazing Emmet!.
    Great Post! Thanks for sharing.

  100. 168

    This is so beautiful, and i will like so much if this guys create an Emmet coding for html.erb tags, that would be wonderful

  101. 169

    Serkan Bektaş

    April 17, 2013 6:00 am

    I use PHPstorm 6 which also supports emmet.

  102. 170

    Is this available for adobe dw6 ??

  103. 172

    I’ve been using Sublime Text for a year and I’ve created and installed enough snippets to get my work done rapidly, I installed Emmet but it “crashed” with my other snippet packages.

    For example, the native behavior of Sublime Text after writing “echo” and pressing TAB is to write , but with Emmet installed, when I write echo I get <echo>&lt/echo>… and none of my snippets work.

    I think this plugin is great when you have a clean installation of your editor or you are a beginner, but for me, I don’t think it makes a big difference.

    • 173

      You can disable tab abbreviations (you’ll have to use ctrl-E instead) by adding this line to Settings – User:

      “disable_tab_abbreviations”: true

  104. 174

    Analía Antenucci

    May 1, 2013 11:18 am

    I absolutely LOVE this! Sublime Text 2 + Emmet = less time, more fun :)

  105. 175

    Jim Kitzmiller

    May 20, 2013 9:58 am

    How do you use Emmet to create an HTML comment?

  106. 176

    Thanks by this amazing article…it covers the basics but also I think more important features of emmet and how it can be used with a beautiful and powerful editor like Sublime Text :) I appreciate it a lot…

  107. 177

    The NetBeans plugin is written by the main guys who do Emmet. While I’ve spotted one relatively minor bug, it should probably be added to the list of officially supported editors.

  108. 178

    Thanks Zeno for posting this. Trying it out in Notepad ++ and its great.

  109. 179

    Vaishakh Pushpoth

    June 18, 2013 11:47 pm

    Awesome! All hail Emmet!
    Now almost any IDE is perfect for HTML.
    Great with Notepad++!
    Thanks Zeno for sharing this!

  110. 180

    J.J. Carlson

    August 9, 2013 9:16 am

    One thing I’ve always appreciated is autocomplete when writing out IDs and classes. I’ve just started using Emmet and haven’t been able to figure out if it offers autocomplete within the HTML text editor when type something like “h1.taller” so I’m sorry for this somewhat newbie question, but does Emmet utilize autocomplete? When working with a large stylesheet, the autocomplete is quite useful.

  111. 181

    Thanks for the post!! is great!!

  112. 182

    Bharat Sharma

    August 26, 2013 10:05 pm

    OMG !!! This is gone be a one of best thing which i even heard in Editor.
    SUblime ROcks

  113. 183


    September 21, 2013 7:08 am

    Mhhh, I’m using Slim to type html, so basically this plugin feel “useless” to me, but that’s just a personal choice.

  114. 184

    why it isnt working when im hitting my tab key what should i do now i have installed emmet succesfully on sublime text 2.

  115. 185

    I am loving it , i have just installed Brackets and emmet makes me feel WOW!

  116. 186

    Hi. Great article. I have a problem with emmet and netbeans. When I try to add emmet comments in html codes that contain php code, slashes () are added before php vars.

    For example I have this line.

    If I try to comment it, it returns

    <!– –>

    The before $var should not be generated.

    The same thing happens if I try to remove tags.

    Am I missing something here?

    Thanx in advance.

  117. 187

    Hi, i trying above a Zencoding with type “Html:5” then press tab nothing happens. can you please help me how can i do this? I using Editplus version “3.41”.

  118. 188

    wow its really awesome

  119. 189

    Stas Ustimenko

    September 3, 2014 1:34 pm

    Codelobster supports ZenCoding and Emmet as well:

  120. 190

    Sohel Ahmed Mesaniya

    October 13, 2014 8:53 pm

    great work dear, keep it up. MUCH HELPFUL. THANKS VERY MUCH.

  121. 191

    can anyone help me with this?
    i just type “html:5” and press Tab, but no code is generated!
    please help

    • 192

      This happened to me as well when I started with a blank unsaved document. All I had to do was change the document type to HTML using the View->Syntax menu or save the file and add the .html file extension.


↑ Back to top