Getting to grips with Emmet – part one

Quicker (and clever) ways of doing things always impress me.

HTML can be a bit of a pain to write out, especially if you’re building the skeleton for a webpage or website.  Emmet is a very handy tool that makes building the basic framework of HTML an easier, quicker task.  This is the first of a number of tutorials the basics of what it is and how to use it.  There’s actually quite a lot to Emmet and how it works, so I’m going to start with the basics.

emmetlogo

Emmet is ‘a web-developer’s toolkit that can greatly improve your HTML & CSS workflow’, to quote the developers website.  It exists as a plugin to text editors, and can also be found on some of the online web editors (such as jsfiddle, codepen and jsbin).  In the examples that follow I’m going to use codepen, but it’s up to you which you want to use.  You could use your own IDE, but installing, configuring and using can differ, so for now if you’re new I’d suggest following along in one of the web-based editors so that the series makes sense.  I’ll cover using it as a plugin at some point in the future.

So, how does it work?

Take the following HTML structure as a simple example:-

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

Emmet lets you specify HTML structure in an quick, abbreviated and simplified way,  and automatically expands to the full HTML structure. It’s kind of like using code snippets if you’ve used them before, only very quick and very cool.

Using Emmet abbreviations, the code above would look like this:-

body>div>p

Let’s try it now.  Open up codepen and in the HTML section type the code directly above and press the tab key.  As if by magic your HTML structure will appear, indented and everything.  Isn’t it cool?

Now, try this:-

body>div>ul>li+li+li+li

Once again, press the tab key directly after.  You should now get this:-

<body>
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
</body>

Great, isn’t it?  But what exactly is going on?  Let me explain.  If you know advanced CSS selectors, you might already have figured it out, but here goes.

The examples so far use two symbols, > and +.  The greater than symbol denotes nesting (and the parent/child relationship), so in this example:-

div>p

We are saying we want a paragraph element within a div.  This:-

div>ul>li

says we would like a div, which contains a unordered list, which in turn contains a list item.

Simple so far?  Now for the plus symbol, which asks that the elements surrounding it are adjacent to (or siblings of) each other, so:-

li+li+li+li

would give you

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

And the following:-

div>h1+p+div>ul>li

Would give you:

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

Does that make sense?  This is the most basic of Emmet syntax, and that’s where I’m going to leave you for today.  Try it out in codepen and see what you can come up with.

Next time around I’ll go into more detail on more advanced markup you can create with this handy little tool.  Until then, as a challenge try and come up with the Emmet syntax for the structure below:

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

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>