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 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.

About the author

Joshua Holdeman is a DevOps Engineer, Software Engineer and Digital Marketing Consultant. With over 10 years in the industry and backed by hundreds of digital marketing projects and websites developed under his direction, he brings experience and knowledge which allows for the recommendation of online software for all of your business needs. Before starting this blog, Josh was the Sr. Software Engineer for a world leader in a marketing and graphic communications franchise system.

Leave a Reply