Basics about Jade HTML Template Language

What is Jade?

Jade (renamed to Pug after it’s version 2.0 released in 2015) is a templating language for Node.js and the browser. It is often used to generate HTML, but it can also generate XML or other types of documents. A templating language works by injecting/replacing variables in a template file with actual values, and transforms the template into an HTML file which is then rendered on client side.

Why Use Jade Instead of HTML?

Jade provides a more compact and easy to read syntax compared to standard HTML. It supports variables, mixins, and includes, which contribute to more efficient template development. One main advantage as a templating language is the ability to include variables and mixins, which results in templates that are easier to read, write, and maintain.

Where can i find Jade documentation?

You can learn more about Jade in their website Pugjs

What is an HTML to JADE converter?

This HTML to JADE converter, is a tool that helps convert in real time HTML code into the JADE templating language. This way you can easier and faster create your jade templates from HTML but also the oposite.

Why converting HTML to JADE?

This HTML to JADE converter, helps you effortlessly convert in real time your HTML code into the JADE/Pug templating language.

How does the converter work?

The algorithm, converts each part of the code to the Jade language automatically. For example things like Basic Tags, Tags with Text Content, Tags with Attributes, Classes and IDs, Nested Elements, Self-Closing Tags, Comments and more.

Here are some examples:

Basic Tags

HTMLJade
<div></div>
div

Tags with Text Content

HTMLJade
<p>Hello, World!</p>
p Hello, World!

Tags with Attributes

HTMLJade
<img src="image.jpg" alt="An image">
img(src="image.jpg", alt="An image")

Classes and IDs

HTMLJade
<div class="container"></div>
<div id="header"></div>
.container
#header

Nested Elements

HTMLJade
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
ul
  li Item 1
  li Item 2

Self-Closing Tags

HTMLJade
<br>
<hr>
br
hr

Doctype

HTMLJade
<!DOCTYPE html>
doctype html

Comments

HTMLJade
<!-- This is a comment -->
// This is a comment

Boolean Attributes

HTMLJade
<input type="checkbox" checked>
input(type="checkbox", checked)

Including Variables

HTMLJade
<p>Hello, <?= $name ?>!</p>
p Hello, #{name}!

Mixins

HTMLJade
<!-- Mixins are not directly used in HTML -->
mixin list-item(text)
  li= text

ul
  +list-item('Item 1')
  +list-item('Item 2')

Extending Layouts

HTMLJade
<!-- Layout extensions are not directly used in HTML -->
//- layout.pug
doctype html
html
  head
    title= title
  body
    block content

//- index.pug
extends layout

block content
  h1 Welcome
  p This is the home page.

Including External Files

HTMLJade
<!-- include "header.html" -->
include header.pug