HTML vs PUG - What you should learn?
M.Muzammil

HTML vs PUG - What you should learn?

By M.Muzammil | February 02, 2023

HTML vs PUG - What you should learn?

PUG (formerly known as Jade) is a template engine for Node.js, while HTML (HyperText Markup Language) is a markup language used to structure and format content on the web.

If you are interested in building websites or web applications, it's important to learn both PUG and HTML. Here's why:

PUG: PUG is a powerful template engine that allows you to create reusable templates for your web projects. It uses a clean, concise syntax that makes it easier to read and write than traditional HTML. PUG can be used to generate HTML, XML, and other types of markup, making it a versatile tool for building web projects.

HTML: HTML is the standard markup language for creating web pages and web applications. It is used to structure and format content on the web, including text, images, and other media. Learning HTML is essential for building websites and web applications, as it allows you to create the structure and layout of your content.

In general, it's a good idea to learn both PUG and HTML if you want to build websites or web applications. PUG can help you create reusable templates and streamline your workflow, while HTML is essential for creating the structure and layout of your web projects.

PUG Basic Syntax:

You might be familiar with HTML syntax but for a PUG, you need to follow some rules.

Here is a brief overview of the basic syntax for PUG and HTML:

PUG:

  • PUG uses indentation and white space to denote structure, rather than tags.
  • To create an element, you start a new line and indent it to the level you want it to be at.
  • To nest an element within another element, you indent it one level further.
  • To add an attribute to an element, you include it on the same line as the element, in the form attribute=value.
  • To add content to an element, you include it on a new line after the element, indented one level further.

Here is an example of a simple PUG template:

html
  head
    title My Website
  body
    h1 Welcome to my website!
    p This is my personal website, where I share my thoughts and ideas.

This PUG template would generate the following HTML:

<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <p>This is my personal website, where I share my thoughts and ideas.</p>
  </body>
</html>

Related Posts

M.Muzammil
M.Muzammil

I am Muzammil, a Self-taught Web Designer & Developer. I haven't yet completed my college degree. Started learning programming at the age of 12 and still learning. I love to work in Javascript and make eye-catchy designs. Free for your calls :)

Be The First To Comment