Bottom Line — Pug makes HTML tags look a lot less messy.

2020 Update: I don’t use Pug templating anymore. I do use HAML with Ruby and Ruby on Rails and it is very similar.

HTML looks like soup as you create complex layouts. You have to use opening <tag> and closing </tag>. They are everywhere and you can’t forget to close one.

Okay, I know that if you’re using a text editor like sublime text, it sort of takes care of these problems with plugins. Jade Templating language, now known as Pug, transpiles into HTML and fixes this issue.

Jade is an HTML templating language. Actually, it is not only for HTML because it also provides an extension to writing javascript. Let me show you HTML vs Jade. One word of warning: If you intend to use PHP, don’t use Jade. It is javascript friendly, and unfortunately doesn’t play well with <% php> tags.

HTML — Example 1

<body>
    <h1>This is a header</h1>
    <div class="container">
        <h1>Headline 1</h1>
        <p>Yes, this is pretty cool</p>
    </div>
    <div class="container">
        <h1>Headline 2</h1>
        <p>Life is good.</p>
    </div>
</body>

Jade — Example 1

body 
  h1 This is a header 
  .container 
    h1 Headline 1 
    p Yes, this is pretty cool. 
  .container 
    h1 Headline 2 
    p Life is good.

Compare the examples above. Instead of closing tags, Jade relies on indentations. Indentations seem much more intuitive to the eye in seeing parent-child relationships between elements.

Go ahead, go to HTML2Jade and play with the two formats yourself.

The other advantage of using Jade is that it supports partials. This means that if you’re making a static website, you can re-use the same code in your pages. Where is this useful? How about the navigation menu. You’ll likely have the same navigation menu for all your pages, so when you add a new link to it, you don’t have to update all your pages. The partial feature part of Jade will update them for you and keep your code DRY (Do not Repeat Yourself).

I’ve noticed a difference in comprehending the page when using Jade in my code. I open the document, and I can quickly understand what is going on.

Since Jade is a templating language, that means that it must be preprocessed before you get an output HTML file. I really like using Prepros to automatically process any Jade files in my selected watch folder. The other great thing about PrePros is that it automatically refreshes the browser for me when it detects changes to the document. If you’re on a Mac, you can use CodeKit.

Using Jade (Pug) to preprocess HTML

Tags

HTML — Example 1

Jade — Example 1