Introduction

This documentation should prove to be an accurate and detailed guide on the usage of PUG, how it enhances HTML code and the standards to be expected when writing HTML; the latter being documented so that this can be approached at any point in a developer's journey, no matter their background in HTML. Some points that should preface the main bulk of this documentation include:

• Installation: To start accessing the PUG syntax, you need to install it using npm (Node Package Manager)

$ npm install pug

PUG is now ready for use.

• File Creation: Utilising PUG in your HTML code is as simple as changing the extension on the file to .pug. From there, utilising its syntax is rather simple.

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

The file then needs to be to be compiled in terminal with the following command:

$ npx pug [insert-file-name].pug

Best Practices for PUG Use

Consistent Naming Conventions and Indentation

The structure of coding in PUG relies heavily on indentation and hierarchal design when writing code. The code should be easily readable as well as functional; the lack of special symbols in tags makes the code trickier to write correctly, though it makes it marginally easier to understand.

Furthermore, attention should be paid to the naming conventions and should be kept consistent throughout the code. For simplicity, camelCase will be utilised for variable names.

Tag Abbreviations and Attributes

It's imperative to take advantage of the abbreviated forms of tags to make the code far cleaner.

div
  p  This is a division.

This is also the case for attributes which should be separated from tags by parentheses. The beginning and end of the attribute is made clear:

input(type='text', name='username')

Conditionals and Loops

The syntax for conditional statements and loops in PUG is quite self-explanatory.

body
 if (isAdmin)
   h1 Welcome, Admin!

u1
  each item in items
    li = item

Commenting

Commenting is important to provide context to code for others to read through and understand. This is crucial when working other collaborators as it ensures a mutual understanding of what is written.

// This is a comment!
body
  h1 This is a heading!

Reading the PUG Documentation

It's always important to look at the sources from which you may be receiving second-hand information from. In this case, refer to the official PUG documentation if any questions are still unanswered: https://pugjs.org/api/getting-started.html