Rapid HTML Development Using Emmet

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.


Last updated on by Joshua Holdeman

Need Web Hosting?

Check out our ranked list of the best web hosting providers based on performance, features, and discounts, and more!

Related Resources & Tips

Joshua Holdeman
About the author

Joshua Holdeman is a DevOps Engineer, Sr. Software Engineer, and Digital Marketing Consultant. With over 12 years in the industry and backed by hundreds of digital marketing projects and websites developed under his direction, he brings experience and knowledge allowing for the recommendation of high-impact business software, tools, and programs to help non-profit organizations, small businesses, and entrepreneurs to launch or grow their business. 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

Join Our Newsletter to Receive Helpful Tips to Launch & Grow Your Business

Including FREE Access to our 7-Day Essential Business Tools Checklist