PugJS Basic Tags

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- 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>

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- 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>

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- 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>

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- 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>

    chevron_right

    
    

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.