Tags in Pug View Engine

Tags play a crucial role in Pug templates, allowing developers to create structured and dynamic HTML content. Let’s explore the concept of tags in Pug in detail.

What are Tags in Pug?

Tags in Pug are used to define elements in the HTML output. They are similar to HTML tags but are written in a concise and indentation-based format, making Pug code more readable and less verbose compared to traditional HTML.

Syntax of Tags in Pug View Engine

doctype html
html
  head
    title My Pug Page
  body
    h1 Welcome to Pug
    p This is a paragraph.

// In this example, html, head, body, h1, and p 
are all tags used to structure the HTML document.

Tag Attributes

Tags can have attributes just like in HTML. Attributes are specified within parentheses and can include dynamic values using template interpolation.

a(href="/about", title="About Us") About
img(src="/images/logo.png", alt="Logo")

// Here, href, title, src, and alt are attributes 
of a and img tags, respectively.

Class and ID Attributes

Pug provides shortcuts for specifying class and id attributes using dot . and hash # notation. In the below syntax .navbar assigns the class “navbar” to the div element, while ul#menu assigns the id “menu” to the ul element.

.navbar
  ul#menu
    li.active Home
    li Contacts

Self-Closing Tags

Self-closing tags like img, br, and input can be written without closing them explicitly in Pug.

img(src="/path/to/image.png", alt="Image")
br
input(type="text", name="username")

Block Expansion

Pug allows block expansion for writing multiple elements in a single line using the pipe | character.

ul
  li Item 1 | Item 2 | Item 3

Dynamic Tag Names

In Pug, tag names can be dynamic based on variables or conditions.

- const tag = 'h2'
tag Hello, Pug!

Steps to Setup the Structure:

Step 1: Create a Pug File with a .pug extension, for example, index.pug.

Folder Structure

Step 2: Write Pug Code. In your index.pug file, start writing Pug code. Pug uses indentation for structuring, so make sure to indent correctly.

doctype html
html
  head
    title My Pug Page
  body
    h1 Welcome to my Pug-powered page!
    p This is a simple Pug template.

Step 3: Preview Pug File. To preview your Pug file as HTML, you can use the Pug Extension’s built-in preview feature.
Press Ctrl + Shift + P and select Pug To Html.

Using PUG TO HTML.

Output :

Preview of PUG file.

Example 2: This example showcase writtinh pug code and showing its output on webpage.

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    title Pug Example Page
    link(rel="stylesheet", href="styles.css")
  body
    header
      h1 Welcome to My Pug Example Page

    section
      h2 Featured Products
      .product
        h3 Product 1
        p Price: $20
        p No discount available

    section
      h2 Contact Us

    footer
      p © 2024 My Pug Example Page

Output:

Pug output file

Benefits of using Pug

• Simplified Code: Pug simplifies code structure, making it easier to read and manage. This streamlined approach not only improves load times but also enhances overall performance.
• Reusable Code: Pug facilitates code reusability through features like mixins, filters, and includes. This helps in organizing templates efficiently and avoids code duplication, saving time and effort.
• Dynamic Content Support: Pug seamlessly handles dynamic content such as variables and loops, enabling templates to adjust based on incoming data. This enhances development efficiency and flexibility.
• Concise and Clear Syntax: Pug’s syntax is designed for clarity, reducing the chances of errors. Its simplicity makes it accessible to developers of all skill levels, promoting a more collaborative coding environment.

Conclusion

Tags in Pug provide a powerful and expressive way to generate HTML markup efficiently. By understanding the syntax and features of tags in Pug, developers can create dynamic and structured templates for their web applications, enhancing productivity and readability in the development process. Experimenting with different tag combinations and features in Pug can lead to more elegant and maintainable code in your projects.