When you think of the name Emmet, the hero from the Lego movie probably comes to mind. Today we’re going to be looking at a different Emmet, one you might not be familiar with. This Emmet we’re referring to is a plugin for many text editors. It helps with the development of HTML by granting your text editor, short-hand coding superpowers.

We’re going to be reviewing Emmet and learn how to set it up. Once done, we’ll highlight some of its  key functionalities. For the continuation of this post, we’ll be using Sublime Text editor as our base example.

Installation

Before we can actually start using Emmet, we’ll need to install it. Firstly, you’ll need to check if the Emmet plugin is available for your favorite text editor. If you’re using Sublime like me, then you can just instal it via Package Control.

Check for compatibility

 

Writing HTML

Now that you’ve installed the plugin, this is where the real fun begins. To use Emmet, just type the HTML tag without ‘<‘ and ‘>’ (abbreviations) and then expand the abbreviations, usually by pressing the ‘Tab’ key. The syntax is very much similar with CSS syntax, so if you’re familiar with CSS, you should get used to it quickly.

1. Child Element

Similar to CSS, we use ‘>’ to indicate that the selector has a direct child. In Emmet, we also use the ‘>’ sign.

2. Sibling Element

A sibling refers to the elements in same nesting level. In CSS we use the ‘+’ sign.

3. Assigning an ID or Class

We use ‘#’ to indicate an ID, and if you’ve noticed by now, it is very similar to CSS.

If we do not specify the element like the above, Emmet will use ‘div’ by default.

We also can assign multiple classes and IDs.

4. Assigning Attribute

You can even assign attributes using the square bracket short code.

5. Multiplication

Emmet can also do math (sort of)! It can create multiple elements just by using one line of code. This is done with the use of the start ‘*’ sign.

6. Basic HTML Document

Tired of looking for that base doc for setting up a HTML file? Emmet can help you with that.

7. Lorem Ipsum

This is probably one of the more useful functions in the plugin. We are very used to going online to look for Lorem Ipsum dummy text to copy-paste. Emmet itself can generate Lorem ipsum dummy text. by typing ‘lorem’ and pressing tab. You can even specify the exact number of words in the sentence.

Conclusion

Emmet is a must have tool for developers. It saves a lot of time once you get used to it. This post is but a mere introduction to Emmet. For more a more detailed reading, you can go here for your reference.

Already using Emmet? Share with us your experience on using this plugin and let us know what else you like about this cool extension. Also if you’re using Sublime Text, why not learn How to Catch Your Errors in Sublime Text 3?