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

Advertisement

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?

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

Initializers

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

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, p.bar#foo 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:

<h1>foo</h1>

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

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

Emmet Demonstration - Texts and Attributes

Nesting

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

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">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

Emmet Demonstration - Grouping

Implicit Tag Names

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

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

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Emmet Demonstration - Multiplication

Numbering

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:

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

Emmet Demonstration - Numbering

Try It Now!

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

CSS Abbreviations

Values

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

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

@font-face {
  font-family:;
  src:url();
}

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

Fuzzy Search

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

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

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!

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

Extras

Lorem Ipsum

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

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!

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

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?

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

(al) (ea)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
  2. 2 http://emmet.io
  3. 3 http://docs.emmet.io/customization/snippets/
  4. 4 http://docs.emmet.io/customization/preferences/
  5. 5 http://docs.emmet.io/customization/syntax-profiles/
  6. 6 http://docs.emmet.io/actions/base64/
  7. 7 http://docs.emmet.io/actions/update-image-size/
  8. 8 http://docs.emmet.io/actions/inc-dec-number/
  9. 9 http://emmet.io
  10. 10 http://docs.emmet.io/
  11. 11 http://docs.emmet.io/cheat-sheet/
  12. 12 https://github.com/sergeche/emmet-sublime
  13. 13 https://github.com/emmetio/Emmet.tmplugin
  14. 14 https://github.com/emmetio/emmet-eclipse
  15. 15 https://github.com/emmetio/Emmet.codaplugin
  16. 16 https://github.com/emmetio/Emmet.sugar
  17. 17 https://github.com/sergeche/emmet.chocmixin
  18. 18 https://github.com/emmetio/emmet/downloads
  19. 19 https://github.com/emmetio/emmet/downloads
  20. 20 https://github.com/emmetio/emmet/downloads
  21. 21 https://github.com/emmetio/emmet/downloads
  22. 22 https://github.com/emmetio/codemirror
  23. 23 https://github.com/emmetio/brackets-emmet

↑ Back to topShare on Twitter

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 Globoesporte.com (the most accessed sports website in Brazil). Now he's a Front-end Engineer at Liferay and co-founder of BrazilJS Foundation.

Advertising
  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.

    Regards,

    Ali Gajani
    Founder at Mr. Geek
    http://www.mrgeek.me

    2
    • 2

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

      1
      • 3

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

        2
      • 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.

        0
    • 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.

      1
    • 6

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

      1
    • 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:
      packagecontrol:-essential
      advanced new file:
      emmet
      bracket-hilighter
      modific
      autoprefixr
      sublimelinter
      colorpicker
      nettutsfetch
      sidebarEnhancements
      theme-flatland
      theme-soda

      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.

      1
    • 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.

      0
    • 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.

      0
  2. 12

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

    1
  3. 14

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

    0
  4. 17

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

    0
    • 18

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

      0
  5. 19

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

    0
  6. 22

    Great post!

    I just install the plugin. It’s awesome.

    0
  7. 24

    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. http://www.1stwebdesigner.com/css/mastering-css-gradients-in-less-than-1-hour/#comment-205142

    Fix that bug, please.

    0
  8. 25

    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?

    0
  9. 27

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

    0
  10. 28

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

    1
  11. 30

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

    0
  12. 32

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

    0
  13. 33

    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.
    Joel

    0
    • 34

      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.

      0
  14. 35

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

    0
  15. 37

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

    0
  16. 38

    Zeno, great work!

    0
  17. 40

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

    0
  18. 45

    great work! looks like a wonderful timesaver.

    0
    • 46

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

      0
      • 47

        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!

        0
  19. 48

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

    0
  20. 49

    Awesome ! Thanks…

    0
  21. 50

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

    0
  22. 53

    This is a super time saver THX!

    0
  23. 54

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

    0
  24. 55

    Lucas Cavalcanti

    March 26, 2013 6:29 am

    o/, thankfully something like sparkup the textmate :)

    0
  25. 56

    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.

    0
  26. 58

    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;

    0
  27. 59

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

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

    Obrigado irmao..!

    0
  28. 60

    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.

    0
  29. 61

    Great Zeno! Thanks

    0
  30. 62

    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

    0
  31. 65

    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: http://webessentials.uservoice.com/forums/140520-general/suggestions/3405113-use-newer-emmet-project-that-makes-zen-coding-obso

    0
  32. 66

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

    0
  33. 67

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

    0
  34. 69

    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.

    0
  35. 70

    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.

    0
  36. 71

    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.

    0
  37. 72

    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

    0
  38. 73

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

    0
  39. 74

    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.

    0
  40. 75

    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)

    0
  41. 77

    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

    0
  42. 78

    Really awesome, congratulations.

    0
  43. 79

    It’s like liking HTML over again

    0
  44. 80

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

    0
  45. 85

    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!

    0
  46. 86

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

    0
  47. 88

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

    0
  48. 89

    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: https://github.com/sergeche/emmet-sublime/issues/225

    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.

    0
  49. 90

    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.

    0
  50. 91

    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?

    0
  51. 93

    Too bad it doesn’t support Visual Studio :(

    0
  52. 94

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

    0
  53. 95

    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.

    0
  54. 97

    Do you maybe plan to release version for Dreamamweaver ?

    0
  55. 100

    A revolution!
    Thank you so much for sharing this!

    1
  56. 102

    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.

    0
  57. 104

    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.

    http://www.jetbrains.com/webstorm/features/index.html

    0
  58. 105

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

    0
  59. 107

    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.

    0
    • 108

      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.

      0
  60. 109

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

    0
  61. 112

    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!

    0
  62. 117

    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 ;)

    0
    • 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.

      0
  63. 119

    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.

    0
  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.

    0
  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?

    0
  66. 122

    Junior Magalhães

    March 27, 2013 8:44 am

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

    0
  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.

    0
  68. 125

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

    0
  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!

    0
  70. 127

    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..

    0
  71. 128

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

    0
  72. 129

    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)

    0
  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.?

    0
    • 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’

      0
  74. 133

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

    0
  75. 135

    Awesome article loved

    0
  76. 136

    Also works for DroidEdit.

    0
  77. 137

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

    0
  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

    0
  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.

    0
  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

    0
  81. 143

    Nice post bro… :)

    0
  82. 144

    the “try it now!” is lovely,,

    0
  83. 145

    Pretty cool stuff… Thanks for sharing!!!

    0
  84. 146

    Wow, that’s really interesting!

    0
  85. 147

    How do you make these beautiful animated gifs ?

    0
  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
    http://www.narga.net/

    0
  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)

    0
  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 ;)

    0
  89. 153

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

    0
    • 154

      I’m so happy to hear that Julien :)

      0
      • 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?

        0
  90. 156

    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 :(

    0
  91. 157

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

    0
  92. 158

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

    0
  93. 159

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

    0
  94. 160

    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

    0
  95. 162

    Michael Parenteau

    April 6, 2013 9:36 pm

    A VIM bundle would be sweet.

    0
  96. 163

    Jaymelensonn Judan

    April 7, 2013 7:10 am

    Amazing, Thanks! :)

    0
  97. 164

    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?

    0
  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?

    0
    • 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

      0
  99. 167

    Jaspal Singh aka jsxtech

    April 10, 2013 3:40 pm

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

    0
  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

    0
  101. 169

    I use PHPstorm 6 which also supports emmet.

    0
  102. 170

    Is this available for adobe dw6 ??

    0
  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.

    0
  104. 173

    Analía Antenucci

    May 1, 2013 11:18 am

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

    0
  105. 174

    Jim Kitzmiller

    May 20, 2013 9:58 am

    How do you use Emmet to create an HTML comment?

    0
  106. 175

    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…

    0
  107. 176

    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.

    0
  108. 177

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

    0
  109. 178

    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!

    0
  110. 179

    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.

    0
  111. 180

    Thanks for the post!! is great!!

    0
  112. 181

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

    0
  113. 182

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

    0
  114. 183

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

    0
  115. 184

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

    0
  116. 185

    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.

    0
  117. 186

    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″.

    0
  118. 187

    wow its really awesome

    0
  119. 188

    Codelobster supports ZenCoding and Emmet as well: http://www.codelobster.com

    0
  120. 189

    Sohel Ahmed Mesaniya

    October 13, 2014 8:53 pm

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

    1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top