How-to Speed-Code HTML using Emmet - The Scipio Files #4

In my LICEcap animated Gif screen recorder tutorial I published 4 days ago, I embedded an animated gif visualizing me typing in HTML code. However, I didn't "just" code barebones HTML there, but instead, I typed in CSS-like expressions that expanded into valid HTML code. Not only does that work way faster, it's also cleaner and less error-prone to bugs (for example forgetting to properly indent and / or writing mal-formed HTML because of missing closing tags).

The tool I used to "Speed-Code HTML" is called Emmet. Emmet is a very cool open source extension for your code editor and it can really improve HTML workflow. (Although Emmet can also be used with other programming languages as well, in this tutorial I only show how to use Emmet for dynamically parsing CSS-like expressions into valid HTML code).

Installation of Emmet

First, remember Emmet is an extension for your code editor. So to install it, you first need to start your favorite code editor. My favorite one is Atom, so I will be using that in the remainder of this article.
within Atom, go to the menu bar and click Atom > Preferences (or use the shortcut keys CMD , on Mac and Ctrl , on Windows / Linux), to enter the Settings tab,
then from the Settings menu click + Install, in the search bar type Emmet and then press Enter of click on Packages. Depending on your current internet speed it may take a second to a couple of seconds to retrieve all packages matching your search,
click the top result of Emmet called "Emmet - the essential tool for web developers" which has over 1.5 million downloads currently,
then click 'Install' (which again depends on your internet connection speed, but it's a pretty small package so it will probably just take a couple of seconds).

If everything went just as I've described, you are good to go!

How to use Emmet

to test things out, first create / open a new blank file called index.html. This way your code editor is told you are editing an HTML file and the Emmet extension "knows" that it should interpret your CSS-style expressions and expand those to valid HTML,
suppose that in HTML you have this: <div class="active"></div>. Then in CSS you can assign a blue background color to it via div.active { background-color: blue; }. Emmet works exactly the other way around using the same CSS-syntax: you create that HTML exact code via Emmet by typing, inside your index.html file, this:

div.active

after every CSS-like expression, Emmet expands that expression to HTML by pressing the TAB key on your keyboard.

-1 In this first example, we are filling the index.html file with a barebones bootstrap including the HTML5 doctype declaration, an <html>, <head> and <body> statement, and some HTML meta-data, by just typing in an exclamation mark ! and hitting the TAB key, like so:

1.emmet.gif

-2- Next, go inside the <body> element and type section#top follow by a TAB key press, to create <section id=top></section>. Remember: in CSS selectors, section is the referred element and # refers to an id HTML attribute, with - in this case top as the id name:

2.emmet.gif

-3- Inside <section id=top></section> we want to insert a <div> with class="wrapper">, so we just type div.wrapper and then hit the TAB key again:

3.emmet.gif

-4- Emmet also allows for "nesting" operators to position abbreviated elements inside generated DOM (Document Object Model) elements. So inside <div class="wrapper"> we now want to place another <div> with id="topnav" and inside that we want to place an unordered list element <ul>, via the Emmet syntax: div#topnav>ul, where in this case ul is a child element of div#topnav. The most important take-away here is that you should use the > (greater than) sign to insert child elements:

4.emmet.gif

-5- Using the * multiplication operator you can define the frequency of an inserted element. If we want to now insert 6 <li> elements inside the <ul>, and let each <li> contain one <a> then we type: li*6>a and hit the TAB key, like so:

5.emmet.gif

-6- You can also insert "sibling" elements via the + (plus) sign, for example let's add two more sections below <section id="top>"> via section#content+section#news:

6.emmet.gif

-7- We can also add text inside an element using {} Curly Braces, for example to add the text "Hello World!" inside an <h1> element inside a <div class="wrapper"> inside <section id="content"> we type:

div.wrapper>h1{Hello World!}and hit the TAB key again:

7.emmet.gif

-8- We can create complex expressions by grouping them inside ( ) Parentheses, for example, to top it all of, let's add a complete FAQ and Footer section including HTML structure and content, in one big Emmet expression, like so:

(section#faq>div.wrapper>div.col*2>p)+(footer>div.wrapper>(div.col>h5{Contact us})+(div.col*2>p))

8.emmet.gif

Concluding on Emmet

I just love it! Emmet can really speed up your HTML development and personally, I use it all the time. I hope this tutorial inspired you to start using Emmet as well! Have fun with it!

Posted on Utopian.io - Rewarding Open Source Contributors