HyperText Markup Language or in short, HTML, is a markup language that makes use of elements to display content in a well-defined structure.
pug.js, also known as PUG, is a javascript library previously known as JADE. It is an easy-to-code template engine used to code HTML in a more readable fashion.
Here is a document, written in HTML:
<!DOCTYPE html>
<html>
<body>
<h1>
This is to showcase
</h1>
<p>
the difference between
</p>
<ol>
<li>
HTML
</li>
<li>
PUG
</li>
</ol>
</body>
</html>
and here is the same document written using the PUG template:
doctype html
html
body
h1
This is to showcase
p
the difference between
ol
li
HTML
li
PUG
Notice that coding using the PUG framework is much easier and more readable than thr HTML codes.
PUG makes use of indentation to distinguish between where a tag starts and ends. This makes the code much cleaner than HTML, where lack of indentation and a need for closing tags makes the code a little cluttered.
Regardless, both HTML and PUG have their strengths.
To learn more about the PUG syntax, click here.