I hate writing HTML markup. I don’t write it that much these days like I used to, but still, sometimes we just have to type it in.

So, here’s my little secret weapon (well, not so secret anymore!): Emmet.

Emmet is a plugin to almost every known code editor that can help you speed up your HTML & CSS workflow. For example, you type in this:

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

Press your chosen shortcut key (I use OPTION+E) and Emmet converts it to:

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

Pretty sweet, huh?

It takes a bit of time to learn a new habit, but eventually, it becomes natural, and it’ll save you a lot of coding time.

Here’s a printable cheat sheet with all abbreviations: https://docs.emmet.io/cheat-sheet/

There are also so many other actions you can use on the code like moving your cursor between the closing and opening tag, merging multiple lines into one, or to comment out the entire block of code quickly.