Using Emmet to enhance your HTML workflow
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow. Emmet is a toolkit for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.
If you are using Sublime Text, you can install Emmet from the Package Control (Preferences -> Package Control -> Install Package -> search for Emmet). It is available for other text editors and IDEs as well .
If you are using Eclipse, you can get it from: https://github.com/emmetio/emmet-eclipse
When Emmet has been installed, the default key to convert your text into markup is tab.
If you type an exclamation sign !and press tab you would get the basic HTML5 skeleton:
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
It is important that when writing text to convert to markup there should be no blank spaces between the different parts of the sentence because this will cause Emmet to evaluate only the parts after the last space. Also, the cursor in the text editor should be placed exactly after the Emmet expression.
To create a blank element you only type the element’s name and press tab.
Examples:
div becomes <div></div>
span becomes <span></span>
If you want to add a class or an id you use the characters that are used in the CSS selectors.
div.container becomes <div class=”container”></div>
div#wrapper becomes <div id=”wrapper”></div>
If you want both a class and id you just type them both:
div.container#wrapper becomes <div class=”container” id=”wrapper”></div>
If you want to insert a div with a particular class or id you can skip the element’s name as div is assumed by default:
.container becomes <div class=”container”></div>
If you want to add a text to the element you enclose it within curly brackets { }
li{Home} becomes <li>Home</li>
Emmet increases the creation of templates tremendously and it even has a dummy text generator.
<p>lorem10 becomes <p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Blanditiis, ex!</p>
You type lorem and the number of words that the lorem ipsum text needs to be. For example, lorem1, lorem25.
The greater than sign (>) creates a direct child of the previous (parent) element.
div#content>p>lorem2 becomes:
<divid="content"> <p>Lorem ipsum.</p> </div>
div#content>p>lorem2+p>lorem4 would become:
<div id="content"> <p>Lorem ipsum. <p>Lorem ipsum dolor sit.</p> </p> </div>
Which is something you most likely do not want. It becomes so because the pointer is at the children of the paragraph element, to move the pointer back to the paragraph element and create a sibling of the paragraph element, you would need:
div#content>p>lorem2^+p>lorem4 (note the added caret) which would become:
<div id="content"> <p>Lorem ipsum.</p> <p>Lorem ipsum dolor sit.</p> </div>
To add a loop and create many similar elements at once you can use the asterisk (*) followed by the number of copies you want.
nav#menu>li*5>a>lorem1 would become:
<nav id="menu"> <li><a href="">Lorem.</a></li> <li><a href="">Libero.</a></li> <li><a href="">Numquam.</a></li> <li><a href="">Facere.</a></li> <li><a href="">Accusamus!</a></li> </nav>
This really facilitates the templating of navigation. It is important to iterate over the element you want repeated as we can easily make an error here if we write the *5 after the anchor tag – it would create one list item with 5 links.
To use the current index of iteration we use the dollar sign ($).
For example, instead of dummy text we could do something like that:
nav#menu>li*5>a>{Item$} which would become:
<nav id="menu"> <li><a href="">Item1</a></li> <li><a href="">Item2</a></li> <li><a href="">Item3</a></li> <li><a href="">Item4</a></li> <li><a href="">Item5</a></li> </nav>
This will give us a unique number for the text of each anchor text. This can be useful for inserting ids or classes. For example.
We can typenav#menu>li*5>a#item$>lorem1 which would give us a unique id for each anchor:
<nav id="menu"> <li><a href=""id="item1">Lorem.</a></li> <li><a href=""id="item2">Eaque.</a></li> <li><a href=""id="item3">Nostrum!</a></li> <li><a href=""id="item4">Accusantium.</a></li> <li><a href=""id="item5">Odit.</a></li> </nav>
To add an attribute to a particular element you use parentheses.
input[type=’number’ name=’username’] would become <input type=”number” name=”username”>
Emmet also facilitates CSS development but we will cover that in another article. I hope you have seen how useful Emmet could be and are setting it up now!
If you are confident enough you can visit the official website: http://emmet.io/ and read more about it.
Tutorial Categories:
input[type=’number’ name=’username’] would become
What’s the difference ? Same number of characters. Better it have plain html rather than have it parsed.
Actually, it is 1 less character. Setting attributes like that is particularly useful when you are looping and creating many elements at once that need to have the same attribute. For example:
input[type=’text’]*5
Of course type text is assumed by default but you get the point.