pug.js tutorial | Chapter 6 | HTML headings in Pug

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

There are 6 different variants of HTML headings tag which are explained in detail where h1 being the most important heading proceeding towards least important.Examples are given below :

											
//Name of the file : headings.pug
H1 HTML haeding using PUG 1
H2 HTML heading using PUG 2
H3 HTML haeding using PUG 3
H4 HTML heading using PUG 4
H5 HTML haeding using PUG 5
H6 HTML heading using PUG 6

You can run the above code using the following command :

											
>pug headings.pug

  rendered headings.html

Now open the headings.html file and observe the headings transformed from pug to html.

											
<!--Name of the file : headings.html-->
<H1>HTML haeding using PUG 1</H1>
<H2>HTML heading using PUG 2</H2>
<H3>HTML haeding using PUG 3</H3>
<H4>HTML heading using PUG 4</H4>
<H5>HTML haeding using PUG 5</H5>
<H6>HTML heading using PUG 6</H6>

Let's see how we can use <hr> tag of html in pug.

											
//Name of the file : hr.pug
p Horizontal line example
|
hr
|
p Some content

You can run the above code using the following command :

											
>pug hr.pug

  rendered hr.html

Now open the hr.html file and observe the horizontal row transformed from pug to html.

											
<!--Name of the file : hr.html -->
<p>Horizontal line example</p>
<hr/>
<p>Some content</p>

Let's see how we can use <head> tag of html in pug

											
//Name of the file : head.pug
html
    head
        title nodejsera
    body
        h1 this is an example of head tag

You can run the above code using the following command :

											
>pug head.pug

  rendered head.html

Now open the head.html file and observe the head transformed from pug to html.

											
<!--Name of the file : head.html -->
<html>
    <head>
        <title>nodejsera</title>
    </head>
    <body>
        <h1>this is an example of head tag</h1>
    </body>
</html>

In this article we learned about

HTML heading tags in pug.
HTML horizontal rule (<hr>) in pug .
HTML head tag in pug.

Get it from :

Pug.js tutorial : HTML headings using pug

Inside this article!