Getting started with pug

Pug.js tutorial : Pug - syntax

Pug tutorial series pugjs tutorial introduction


In this part of the pugjs tutorial series we will learn about the basic syntax of a simple pug document.

Syntax of a .pug document

The syntax of a .pug document is somewhat similar to HTML except few differences which includes :

  1. Tags are not included in angular brackets
  2. We don't have closing tags
  3. Indentation defines the starting and ending of blocks
These are some of the very basic differences between a .pug and .html document. An example of a .pug document with proper syntax is given below :
//Name of the file : pug-syntax.pug
doctype html
    title  Pugjs Tutorial | Pug Syntax | Nodejsera
      h1  Pug Syntax 
      p This is a single line paragraph
        | This is
        | a multiline
        | Paragraph.


Please note that all the above tags are explained in full detail in the Pug Templating with HTML section of pug.js tutorial series.
You can run the above code using the following command :
>pug pug-syntax.pug

  rendered pug-syntax.html

Now open the pug-syntax.html file transformed from pug as shown below :
<!--Name of the file : pug-syntax.html-->
<!DOCTYPE html>
<html lang="en">
        <title> Pugjs Tutorial | Pug Syntax | Nodejsera</title>
            <h1> Pug Syntax </h1>
        <div class="main-class" id="main">
            <p>This is a single line paragraph</p>
            <p>This is
                a multiline
    <script src="myscript.js"></script>

What we learned

In this article we learned about the basic syntax of a simple .pug document.


Get it from :