HTML to PUG
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.
Comparison
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.
Strengths of HTML
- It is a standard for constructing documents and can be used for numerous platforms, including Web Development, Mobile Development, and even Jupyter Notebook.
- It can be integrated with multiple languages.
- It is simple to edit as you can write and edit it in notepad.
- HTML is lightweight.
Strengths of PUG
- You can code HTML documents dynamically.
- Better readability.
- It gives you more coding freedom. For example, you can use conditional statements, or you can import/include other files and incorporate them into your current file.
To learn more about the PUG syntax, click here.
Free Resources
