Block expansion

When each tag only has one tag nested under it, it can be a little annoying to have a new line for each one of them:

ul
  li.first
    a(href='#') foo
  li
    a(href='#') bar
  li.last
    a(href='#') baz

So, Jade has a feature called block expansion that lets us put those tags on the same line, meaning we can rewrite the preceding example as the following:

ul
  li.first: a(href='#') foo
  li: a(href='#') bar
  li.last: a(href='#') baz

The : (colon) after the tag name and attributes indicates that there is another tag following that one. We can even make really long chains of tags:

Jade	HTML
ul: li.first: b: a(href='#') foo	<ul> <li class="first"> <b> <a href="#">foo</a> </b> </li> </ul>

But that is really hard to read, so please, never do that unless you have a very good reason.