Headings in Pug View Engine

Pug.js is a template engine for Node.js and browsers to render dynamic reusable content. At compile time, the template engine compiles our Pug template code to HTML. Pug has many powerful features like conditions, loops, includes, and mixins using which we can render HTML code based on user input or reference data. Pug also supports JavaScript natively, hence using JavaScript expressions, we can format HTML code. This approach allows us to reuse static web pages which have dynamic data. Angular brackets are not used while specifying the tags.

Headings in Pug

The HTML heading tag is used to define the headings of a page. There are six levels of headings defined by HTML. These 6 heading elements are h1, h2, h3, h4, h5, and h6; with h1 being the highest level and h6 being the least.

Syntax of Heading in Pug:

h1  Heading
h2  Subheading

Features of Headings in Pug View Engine

• h1 is used for the main heading. (Biggest)
• h2 is used for subheadings, if there are further sections under the subheadings then the h3 elements are used.
• h6 for the small heading (smallest one).

Steps to Create Headings in Pug View Engine:

Step 1: Create a Nodejs Application using the following command:

npm init -y

Step 2: Install required Dependencies:

npm i pug express

The updated Dependencies in package.json file will look like:

"dependencies": {
    "express": "^4.18.2",
    "pug": "^3.0.2"
}

Folder Structure:

Headings in Pug

Example: Create the required files as seen in folder structure and add the following codes.

HTML

//heading.pug
doctype html
html
  head
    title GeeksforGeeks Pug

    style.
      h1 {
        color: green;
      }
  body
    h1 Welcome to GeeksforGeeks
    h2 Welcome to GeeksforGeeks
    h3  Welcome to GeeksforGeeks
    h4 Welcome to GeeksforGeeks
    h5 Welcome to GeeksforGeeks
    H6 Welcome to GeeksforGeeks

Javascript

//app.js

const express = require('express');
const app = express();
const port = 3000;
app.set('view engine', 'pug');
app.get('/', (req, res) => {
    res.render('heading');
});
app.listen(port, () => {
    console.log(`server is running at http://localhost:${port}`);
});

Output:

Headings