4 Templating Systems to Write Quicker, Cleaner HTML

Alternatives to vanilla HTML

We have HTML in other languages

There are several technology-specific solutions to writing HTML.

  • Ruby has eRuby (or ERB),
  • PHP has, well, “HTML in PHP”.
  • Java has JSP (JavaServer Pages), and
  • ASP.NET uses so-called Razor syntax to demarcate HTML code.

The problem with vanilla HTML

HTML stands for Hypertext Markup Language, and as a markup language, it does not have the functionality of a typical programming language. Markup languages are designed to be easy-to-read by humans as well as machines, and they typically use tags to define elements within a document.

  • It is not simple to add dynamic data into vanilla HTML.
  • If you want to generate repeated elements, there are no in-built shortcuts in the form of loops (for, while and so on). Nor is there an in-built method for handling conditionals (if … else or switch statements).
  • Vanilla HTML doesn’t allow users to define new, re-usable tag types.
  • Lastly, even though HTML is simple to read, it could be faster to write. Opening and closing tags can be a pain to type again and again, and parts of HTML may seem verbose, e.g. <button type="button" /> .

2. HAML

Underlying Language: Ruby

- (1..10).each do |i|
%div #{i}
- isSunny = false
- if isSunny
%p Let's go outside!
- else
%p I'd rather stay inside.

1. Pug (a.k.a Jade)

Underlying Language: JavaScript

2. HAML

Underlying Language: Ruby

3. Slim

Underlying Language: Ruby

4. Markdown

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store