Rapid HTML Development Using Emmet

Do you ever find yourself frustrated repeating HTML tags over and over again while developing web applications? Most IDE’s offer a solution for this called Emmet – and it will change the way you develop HTML forever.

Emmet is a set of plug-ins for text editors that allows for high-speed coding and editing in HTML and other structured code formats via a content assist. The project was started by Vadim Makeev in 2008 and continues to be actively developed by Sergey Chikuyonok and Emmet users.

Abbreviations are the bread-and-butter of the Emmet toolkit: these special expressions are parsed in runtime and transformed into a structured code block, HTML for example. The abbreviation’s syntax looks like CSS selectors with a few extensions specific to code generation. So every web developer already knows how to use it.

You can use elements’ names like div or p to generate HTML tags. Emmet doesn’t have a predefined set of available tag names, you can write any word and transform it into a tag: div → <div></div>, foo → <foo></foo> and so on.

Emmet integrates with many editors and IDE’s such as Eclipse, Sublime Text 2, Espresso, Atom, Notepad++, PHPStorm and more.

You can start learning syntax to unleash the full power of Emmet abbreviations. Once you learn the abbreviation syntax you can begin more complex operations such as nesting operators.

For example:

#page>div.logo+ul#navigation>li*5>a{Item $}

Will transform into:

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

Emmet is a must-have for any developer to speed up their project development. To learn more visit www.emmet.io.