General Overview

As hobbyists, we take time in building our sites, and in this case, we tend to carefully write our HTML and CSS markup carefully from top to bottom, making sure that all the tags and the definitions are all closed up or errors start to crowd around all over our work. But then, there are some of us hobbyists who just couldn\’t wait to get our sites done, we tend to get antsy with getting the entire project done and launch it right away, even though we don\’t have a due date. While we have the antsy, we also have procrastinators too, who tend to put things at the last minute and just rush through before the deadline, expecting to be all completed and ready to go.

But as we all know, even though HTML and CSS aren\’t that difficult to learn, it\’s also difficult to write clean HTML/CSS markup. We may have missed a closed tag or two, or even a small character. It\’s not like with writing, where we can get away with non-intended grammar and spelling mistakes unless the reader has eagle eyes. With building markup structures, one little missing character in a code can ruin an entire layout, and when that happens, we lose our cool and scream at whatever text editor we may be using for not detecting that one little mistake before we launch them in our web server. Maybe not.

So, how can we make HTML/CSS a whole lot easier to write without the hassle and the headaches of these tiny little mistakes? How about writing HTML that looks something like this?

And then, when you press the Tab key after that strange line with all those special characters, this happens?

With just a few familiar HTML tags without the greater than, less than, and forward slash characters, a few special characters you usually see on CSS, and a tap of one little key to the left of your keyboard, you can already have a whole block of HTML code generated quickly just for you.

Let\’s break this little line div>ul>li*5 into a few pieces:

• The following three elements in this line: div, ul, li call for a pair of these three tags, like the one you see in the above example.
• The greater than signs > on the line calls for the next two elements on that line to be nested within the first element, like so:
  
• The final part of the line *5 indicates that the li element to be populated five times:
  

This form of abbreviated coding is what we call Emmet. With Emmet support for your text editor, not only will it save you a lot of time, but it will save you stress and headaches from reviewing your entire markup from top to bottom and then checking each of your tags to be sure that they are all closed and that no important little character is missing or mistyped.

What (or who?) the heck is Emmet?

Emmet is a plugin for your favorite text editor, in which you as an antsy coding procrastinator would use simple, familiar CSS syntax to populate HTML elements in your markup for faster, cleaner markup structure without the hassle of copying and pasting the same elements or even checking and editing your entire structure to be sure that all your tags are closed or if you\’ve got all the necessary quotation marks in place. (Whew, that\’s a mouthful!)

When I say favorite text editor, I\’m not talking about your Windows default Notepad application here that some coders love to show off when they talk about how they built their sites with. I\’m talking about those awesome text editors created specifically for coding and programming, like Sublime Text, Notepad++, Brackets, Atom, Visual Studio Code, and even those WYSIWYG editors like Adobe Dreamweaver. Emmet also supports online IDEs like JSFiddle, CodePen, and Codio.

A Super-Quick History of Emmet

There was an early version of this concept that was called ZenCoding that began sometime in the late 2000s (2008 I think?). They referred to this concept as an abbreviation engine. It used to be a series of plugins that supported HTML, XML, XSL, and other structured code formats through content (or code) assist. The ZenCoding became revolutionary among the experts and professionals that a community began to continue on developing the plugins. Eventually, these set of plugins became one and gained a new name: Emmet.

Sources:

• Wikipedia
• Smashing Magazine

The Benefits of Emmet

Here are a few benefits of using Emmet for your text editor:

• It\’s super-duper easy to learn, especially if you\’re familiar with CSS syntax. Think Emmet as the web designer/developer\’s version of Markdown.
• It\’s consistent throughout all the text editors, so if you decide to change your text editor (from Notepad++ to Sublime Text, for example) and if it has Emmet support, you just need to install the Emmet plugin and you\’re good to go.
• You are a fan of the Tab key and keyboard shortcuts. Emmet will require you to use your Tab key a lot to generate your snippet, or, depending on the text editor you\’re using, even make things faster by using some keyboard shortcuts.
• Because each of us web designing and development hobbyists have an antsy procrastinator-type of personality on the inside, Emmet will get things done quickly for us.
• Oh, one more thing. The syntax that Emmet generates are valid code, so you wouldn\’t have to worry about running your markup through the HTML validator.

Okay, so I want my (awesome) text editor to have Emmet support. How do I install the Emmet plugin?

Although you can go directly to the Emmet download page, you would actually need to go to the official website of your text editor and go to their Plugins or Extensions section. Or, if your text editor has a menu item for plugins or extension manager or something similar (like Brackets, hehe), you can go through there as well. Just search for Emmet and follow the instructions on how to install the plugin to your text editor. If you are searching this through your text editor plugin manager, it\’d just be with a click of a button. I use Brackets most of the time, but I also have Emmet support for Notepad++ installed in my system.

Once you\’ve installed the plugin in your text editor, you should be good to go. If you\’re having problems, be sure to check tech support for your text editor and they\’ll help you out.

Sample! Sample!

Want an early sample of Emmet? Sure! Let\’s start!

1. Open your text editor, and create an HTML file called sample.html or whatever name you want to call it. This will be our sample HTML file to do all our cool Emmet stuff.
2. Type an exclamation point ! on the first line, then press the Tab key.

Did you see that? That one little exclamation point just generated you a whole HTML structure (HTML5 format) from the DOCTYPE to the closing HTML tag. You should be seeing this in your text editor right now:

Yes, it\’s a very short sample, but a very effective one. You just gave yourself less than a second of a head start to your markup. From this point, you will have to keep in mind to always start your HTML markup structure with one exclamation point ! and the Tab key, then you can finally work on your core stuff. Try to make it a habit when you begin building your structure.

Next…?

On the next part of our tutorial, we will be getting into the simple nitty-gritty of Emmet. I know I could\’ve written more on this first part, but I think it\’s a lot more organized and easy to follow if I break things down first, don\’t you think?

See you next time!