High-Speed Coding Goodbye, 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

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

Advertisement
  1. 1

    I use PHPstorm 6 which also supports emmet.

    0
  2. 102

    Is this available for adobe dw6 ??

    0
  3. 304

    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.

    1
    • 405

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

      “disable_tab_abbreviations”: true

      0
  4. 506

    Analía Antenucci

    May 1, 2013 11:18 am

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

    0
  5. 607

    Jim Kitzmiller

    May 20, 2013 9:58 am

    How do you use Emmet to create an HTML comment?

    0
  6. 708

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

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

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

    0
  9. 1011

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

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

    Thanks for the post!! is great!!

    0
  12. 1314

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

    0
  13. 1415

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

    0
  14. 1516

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

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

    0
  16. 1718

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

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

    wow its really awesome

    0
  19. 2021

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

    0
  20. 2122

    Sohel Ahmed Mesaniya

    October 13, 2014 8:53 pm

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

    1
  21. 2223

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

    0
    • 2324

      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.

      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