Introduction to Emmet

August 07, 2016

Quick explanation :

let’s say you need to write down the following HTML code:

<div class="row">
	<div class="col-md-6"></div>
	<div class="col-md-6"></div>
</div>

Using Emmet you would type the following:

div.row>div.col-md-6*2

And then dramatically press the TAB key on your keyboard, it will expand to the aforementioned html like magic.

Q: What do I need to use Emmet ?

• 1 : Almost nothing,online web editors like my favorite at the moment Codepen you already use it: emmet in codepen. The html & css sections support Emmet,all you need to do is learn the syntax, but what about your local environment ?

• 2 : Depending on your Development Environment or Text Editor, you will have to download a plugin, here is a list of supported editors: Emmet.io for your editor

A few basic Emmet commands to get you started:

• Turn Html and non Html elements to Tags simply by typing the element plus : tab

To get this:

<div>
</div>

You would type this:

div

• Nest divs for your div soup with >

To get this:

<div>
	<div>
		<div></div>
	</div>
</div>

You would type this:

div>div>div

• Add classes and Id’s to your divs or elements with elem. and elem#

To get this:

<div class="classy1 classy2" id="peter"></div>

You would type this:

div.classy1.classy2#peter

• Add a sibling ( or parallel ) elements with +

To get this:

<div></div>
<div></div>
<div></div>

You would type this:

div+div+div

• Multiply elements with *

To get this:

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

You would type this:

ul>li*5

Practice:

Here’s a handy pen with a few more commands for you to practice your new found Emmet powers at your pace:

See the Pen Emmet Practice Dojo by Eugenio - Keno - Leon (@k3no) on CodePen.

Further Reading:

Emmet Syntax
Cheat Sheet

Hope you’ve enjoyed and learned a bit with this quick overview of Emmet.

Till next time.

Best,

Keno