pug.js tutorial | Chapter 4 | HTML elements in Pug

In this part of the pug tutorial series we will learn about how we can write html elements in pug.

There are 3 different ways of writing HTML tags in pug which are as follows :

Using simple way : The first way of writing HTML elements in pug is by simply putting the text after the tag as shown below :

											
//Name of the file : using-simple.pug

p This is the most commonly used 
p way of writing html using pug

You can run the above code using the following command :

											
>pug using-simple.pug

  rendered using-simple.html

Now open the using-simple.html file and observe the content successfully transformed html.

											
<!--Name of the file : using-simple.pug-->
<p>This is the most commonly used </p>
<p>way of writing html using pug</p>

Using Pipe : The second way of writing HTML elements in pug is by putting the indented text below the tag with pipe ( | ) as shown below :

											
//Name of the file : using-pipe.pug


p
	| Hence we use piping to avoid this problem
	| as long as we are piping the content
	| it is going to remain in a single tag
	| the relevant HTML is given below

You can run the above code using the following command :

											
>pug using-pipe.pug

  rendered using-pipe.html

Now open the using-pipe.html file and observe that all the content added using pipe remains in the same paragraph tag.

											
<!--Name of the file : using-pipe.html -->

<p>
Hence we use piping to avoid this problem
as long as we are piping the content
it is going to remain in a single tag
the relevant HTML is given below</p>

Using Dot : The third way of writing HTML elements in pug is by putting the indented text below the tag with dot ( . ) as shown below :

											
//Name of the file : using-dot.pug
p.
    Hence we use piping to avoid this Problem
    as long as we are piping the content
    it is going to remain in a single tag
    the relevant HTML is given below

You can run the above code using the following command :

											
>pug using-dot.pug

  rendered using-dot.html

Now open the using-dot.html file and observe that all the content added using dot remains in the same paragraph tag.

											
<!--Name of the file : using-dot.html-->

<p>Hence we use dot to avoid this Problem
as long as we are dot the content
it is going to remain in a single tag
the relevant HTML is given below</p>

pug variants of simple html tags

HTML Element name	Pug element name	Example
<title>	title	`title` this is a title
<h2>	h2	`h2` this is a heading
<footer>	footer	`footer` this is a footer

Just like HTML, it is very common to have nested tags in pug. Some common examples of nested tags is given below :

											
//Name of the file : nested-tags.pug
html
    head
        title nodejsera
    body
        h1 this is an example of nested tags
        div
            p this is under div which is under body tags
        p this is outside div
        footer this is a footer

You can run the above code using the following command :

											
>pug nested-tags.pug

  rendered nested-tags.html

Now open the nested-tags.html file and observe the nested tags

											
<!--Name of the file : nested-tags.html-->

<html>
        <head>
            <title>nodejsera</title>
        </head>
        <body>
            <h1>this is an example of nested tags</h1>
            <div>
                <p>this is under div which is under body tags</p>
            </div>
            <p>this is outside div</p>
            <footer>this is a footer</footer>
        </body>
</html>

Get it from :

Pug.js tutorial : HTML elements using PUG

Inside this article!