Open In App

PugJS Basic Tags

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about pug basic tags and see how they get compiled into HTML code.

Project Setup:

Step 1: Install pug by running the following command. -g is for global install and it is optional.

npm install pug-cli -g

npm i pug-cli -g

Step 2: Open the project folder code editor. Make an index.pug file, and an index.html file in the root project directory. Inside html, make an index.html file. Our directory structure will now look like this:

Project Structure

Project Structure

Step 3: Now we will write pug template code in index.pug file and see it’s HTML output in index.html file. For automatic re-compiling of pug template code to HTML on file save, run below command in the terminal:

pug -w ./ -o ./html -P

“-w ./”means watch any changes in pug file in the current directory, “-o ./html -P” means save the output in html file in the current directory and pretty print it (format it correctly). You should get the following upon running the command:

watching changes in pug file and saving it in html file

Now let’s understand tags in PugJS and see the corresponding compiled HTML.

  • Pug uses the same set of HTML tag names but it doesn’t have opening and closing tags. It uses indentation for nesting HTML tags. A boilerplate pug skeleton structure and it’s compiled HTML would look like:




    <!-- pug template code -->
    doctype html
    html
        head
            title
        body
            h1
            br/  <!-- self closing tag -->
            p
      
    <!-- compiled html code -->
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
            <h1></h1>
            <br />
            <p></p>
        </body>
    </html>

    
    

  • For rendering content inside a HTML tag, we give a space character and the write the content of that tag. Example:




    <!-- pug template code -->
    doctype html
    html
        head
            title GeeksForGeeks
        body
            h1 Welcome to GeeksForGeeks
      
    <!-- compiled html code -->
    <!DOCTYPE html>
    <html>
        <head>
            <title>GeeksForGeeks</title>
        </head>
        <body>
            <h1>Welcome to GeeksForGeeks</h1>
        </body>
    </html>

    
    

  • For multiline content, just after the paragraph tag, add a “.” (dot) and then on the next line, indent it with a tab space. It is called Tag Interpolation. Example:




    <!-- pug template code -->
    doctype html
    html
        head
            title GeeksForGeeks
        body
            p
                This is a paragraph which is
                spread across multiple lines
      
    <!-- compiled html code -->
    <!DOCTYPE html>
    <html>
        <head>
            <title>GeeksForGeeks</title>
        </head>
        <body>
            <p>
                This is a paragraph which is
                spread across multiple lines
            </p>
        </body>
    </html>

    
    

  • To save space, pug provides an inline syntax for nested tags. It is called Block Expansion. Example:




    <!-- pug template code -->
    doctype html
    html
        head
            title GeeksForGeeks
        body
            a: img
      
    <!-- compiled html code -->
    <!DOCTYPE html>
    <html>
        <head>
            <title>GeeksForGeeks</title>
        </head>
        <body>
            <a><img /></a>
        </body>
    </html>

    
    



Last Updated : 18 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads