Getting to grips with Emmet – part two

Emmet is a useful bit of kit that allows you to quickly create HTML markup by using CSS-style abbreviations.  A couple of days ago I posted an introduction to the syntax of Emmet and asked you what the basic Emmet code would be for the following:-

<div>
  <h1></h1>
  <p></p>
  <h2></h2>
  <p></p>
</div>

Did you get it in the end? The answer I came up with is this:-

div>h1+p+h2+p

Try it now in codepen, jsbin or jsfiddle and after typing press the tab key and the HTML markup should appear as shown earlier.

In today’s post I want to cover a couple more handy hints on using Emmet to speed up your HTML coding.  The first thing I want to cover is producing code like this:-

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

Fairly straightforward using what we know already, isn’t it?

ul>li+li+li+li+li+li

BUT, it’s still a bit of a pain to type in, and counting those li elements is a bugger, too.  What if we had twenty list items, or thirty, or even more?  Turns out Emmet lets you do things in a much simpler way.  You just tell it how many elements you want using the multiplication symbol (*):-

ul>li*6

How simple is that?  Amazing, I say.  Using this technique you can easily create as many elements as you like!  Brilliant..

So, to make something like this:-

<div>
  <p></p>
  <p></p>
  <p></p>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

You can now write this:-

div>p*3+ul>li*3

Not too complicated at all, is it?

One more hint for today before I sign off.  How do you think you would do this?

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

It’s quite a tricky one and (as far as I’m aware) isn’t possible with the basics I’ve taught you so far, because all we really know at the moment is to nest items or make them siblings of each other.  What we can see from the example is that we are looking at three adjacent divs, each with two paragraphs in it.  To pull of something like this we need to group things together, and we do that using parentheses (brackets to you and I).

Grouping items means you can apply the same kind of syntax, but have things together as one.  Consider this:-

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

Using parentheses, you could do this:-

(div>p)+(div>p)

Try it now.  Magic eh?  This has said that we want the div>p to be grouped together and then made into a sibling of div>p.  The brackets bring the elements together so that Emmet treats them as individual.  Now, given that we know how to specify how many times an element is created, we can combine what we know into this to get the result we need:-

(div>p)*3

Again, magic!  Parentheses can be used to group items together, and can even be nested to make much more complex structures than we could at the start of this article.  Try the example below for size (after you’ve tried to figure out what the outcome will be):-

(div>p)+(div>ul>li*5)+((div>h2>p)*2)*3

(Ok, it’s overcomplicated, but you get the idea).  In part three of this series of articles I’ll be looking at some more hints, including adding id and class attributes to your elements.  Come back soon!

Leave a Reply

Your email address will not be published. Required fields are marked *