Generate HTML with Emmet in your Favorite Editor

January 7, 2015 · 1 minute read

If you haven’t heard of Emmet, let me introduce you. Emmet is a shorthand language for generating HTML blocks. It uses CSS selectors to generate HTML, CSS, Content and XSL.

For Example:

#container>div.header+ul#nav>li*3>a{Item $}

Generates:

<div id="container">
    <div class="header"></div>

     <a>Item 1</a>
     <a>Item 2</a>
     <a>Item 3</a>
</div>

This should be in every developers toolbox. The documentation is outstanding as is the main site. There is even a cheat-sheet.