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
>pug headings.pug
rendered headings.html
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
>pug hr.pug
rendered hr.html
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
>pug head.pug
rendered head.html
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
pug
. <hr>
) in pug
. pug
.