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 : Nothing,you already have emmet here in codepen. That's right, 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

Emmet basics ?

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 ) element 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:

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


519 0 0