Pug Elements

Pug elements are used to define the HTML structure in Pug templates. It represents various HTML tags used to define the layout and content of a web page. Pug elements are constructed using indentation-based syntax that makes the code visually clean and easy to read.

Syntax:

The syntax for defining Pug elements is straightforward. Each element is represented by its tag name followed by optional attributes, and content and arranged hierarchically using indentation.

// This is a Pug template demonstrating basic syntax with comments

// Define document type and language
doctype html
html(lang="en")

  // Head section containing metadata and stylesheets
  head
    title My Pug Page
    meta(charset="UTF-8")
    link(rel="stylesheet", href="styles.css")
     
    // Internal CSS
    style.
       h1 {
            color:green;
       }
  // Body of the document
  body

    // Header section with an ID
    header#main-header

      // Element with class and text content
      h1.heading Welcome to My Website

      // Navigation menu with list items
      nav.menu
        ul
          // List item with class and href attribute
          li.menu-item
            a(href="#") Home
          li.menu-item
            a(href="#") About
          li.menu-item
            a(href="#") Contact

    // Main content section
    section#content
      // Container with ID and class
      .container
        // Paragraph with class and text content
        p.intro This is a demonstration of Pug syntax.
        // Image with src and alt attributes
        img.image(src="image.jpg", alt="Example Image")

    // Footer section
    footer#main-footer
      // Container with ID
      .container
        // Paragraph with text content
        p Copyright © 2024 My Website. All rights reserved.

Pug is a template engine that works with JavaScript libraries and frameworks. It simplifies the process of writing HTML by reducing traditional HTML syntax. It uses indentation to represent HTML structure. By using Pug you can reuse the HTML code.

In this article, we will learn about Pug Elements with its syntax and example.