What is HTML Preprocessor ?
Last Updated :
30 May, 2023
In this article, we will learn about the HTML pre-processor & will explore the pre-processor used for HTML. As its name suggests, the HTML pre-processor is the first stage of the whole compiling process which includes removing the comments, expanding the macros, the inclusion of the headers, etc. When we write HTML and CSS, sometimes we need to repeat the specific task multiple times, thus it will lead to inefficiency. Pre-processors can overcome these problems.
Pre-processor is a program that accepts one form of data input & converts it to another form of input data, usually in HTML and CSS. The pre-processor is made for the purpose of including new features with the existing ones without violating browser compatibility. The reason for adding the pre-processor is given below:
- It follows the DRY rule (Don’t Repeat Yourself) i.e., we need not re-write or repeat the same block of code multiple times for reusing the same functionality.
- Maintaining the large-size code will be easier.
- Reduces the overall development time & helps us to organize the code properly.
HAML Pre-processor: Haml stands for HTML Abstraction Markup Language, created by Hampton Catlin and the only objective behind creating it is to make the markup beautiful. It is basically a Ruby-based pre-processor and required Ruby to be installed. HTML pre-processor can also be understood as it is a program that helps the developer to generate the HTML syntax from the syntax of the preprocessor. It will add some unique features which do not present in the pure HTML syntax. Hence, Haml is designed to escape the writing of inline code for web documents will make the HTML cleaner & also provides the flexibility to have some dynamic content in the HTML. As preprocessors are the programs they are always processed in some languages, hence the Haml is processed in HTML and Sass. We will follow the steps below to install the HAML:
For installing the HAML:
gem install haml
For converting the HAML to HTML:Â
haml index.haml index.html
Note: Command must be run inside the same directory where the index file resides.
Example 1: In this example, we will simply create a heading using HTML and HAML. We can notice that redundancy in code will get reduced after converting from HTML to HAML using preprocessors.
Code for the header in Haml Pre-Processor:Â
%body
%center
%header
%h1GeeksforGeeks
%section
%bA Computer Science Portal for Geeks
HAML code converted into HTML:Â
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<center>
<header>
<h1>GeeksforGeeks</h1>
</header>
<section>
<b>A Computer Science Portal for Geeks</b>
</section>
</center>
</body>
</html>
Output:
Note: The HAML code will reduce the code readability for the HTML code but the code reduced syntactically and also by line.
Example 2: In this example, we will learn another set of preprocessors to substitute classes in <div>.
HAML Code:
!!! 5
%html
%head
%title GeeksforGeeks HAML Tutorial
%body
%h3
.head HTML Abstraction Markup Language
.container HAML is basically a Ruby-based pre-processor &
required Ruby to be installed in your local machine for the
Mac OS, Ruby comes preinstalled while for windows users.
HAML code converted to HTML:Â Â
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks HAML Tutorial</title>
</head>
<body>
<div id="content">
<h3>HTML Abstraction Markup Language</h3>
<div class="container">
HAML is basically a Ruby-based pre-processor
and required Ruby to be installed in your
local machine for the Mac OS, Ruby comes
preinstalled while for windows users.
</div>
</div>
</body>
</html>
Output:
Example 3: In this example; we will learn how to use <blockquote>.
HAML Code:
%blockquote
%div
GeeksforGeeks has best minds
HAML code converted into HTML:
HTML
<html>
<head>
<body>
<blockquote>
<div>
GeeksforGeeks has best minds
</div>
</blockquote>
</body>
</html>
Output:
ADVANTAGES
The following points for which the HAML pre-processor is considered useful:
- Prefer beautiful markup: It facilitates the organized markup of the code with a user-friendly experience & also renders the output in a structured manner.
- DRY(Don't Repeat Yourself) rule: It follows the DRY approach for discarding unnecessary HTML code that involves major repetition.
HTML
<body>
2
3
<!--Heading tags are opened and closed-->
4
<h2>GeeksforGeeks, A Computer Science portal for geeks.</h2>
5
6
<!--Body is closed-->
7
</body>
HTML pre-processor avoid all of this by relying on indentation, not text, to determine where elements and blocks of code begin and end. It does not only work in large templates but it does result in smaller templates, which makes the code much cleaner to look at.
Output:
%body
%h2 GeeksforGeeks, A Computer Science portal for geeks.
- Well-indented markup should be preferred: To improve appearance, markup language should be well-indented which makes it easy to read. It also determines where an element starts and ends.
- There should be a clear HTML structure: With some minimum effort, it helps to maintain the markup language with a clear structure & logical understanding of the final result.
Similar Reads
What are CSS Preprocessors?
CSS preprocessors are used to write styles in a special syntax that is then compiled into standard CSS. They extend the functionality of standard CSS by introducing features like variables, nesting, mixins, and functions. By using preprocessors, you can take advantage of advanced features that are n
3 min read
Haml | HTML Pre-processor
As its name suggests the pre-processor is the first stage of the whole compiling process it includes removing the comments, expanding the macros, the inclusion of the headers, etc.  In HTML and CSS when it comes to writing it, It is a bit crucial as we have to do the same job again and again like c
3 min read
What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to structure and design web pages. It defines how text, images, and multimedia content are displayed in a web browser.HTML uses tags and elements to organize content on a webpage.It was created by Tim Berners-Lee in 1990 for shari
4 min read
What is HTML DOM ?
HTML DOM stands for the Document Object Model is a tree-like structure that offers dynamic interaction and manipulation of the content, structure, and style of an HTML document. It is an interface for web documents. Based on user activity The HTML DOM offers to create interactive web pages where ele
4 min read
Why is HTML used in Web Pages ?
Web pages are built using the HyperText Markup Language or HTML. It is a markup language that defines a webpage's content and structure using tags. These tags provide instructions to web browsers on how to show links, photos, videos, text, and other content. Consider HTML as a house's plan, detailin
9 min read
HTML Parsing and Processing
The word parsing means to divide something into its components and then describe their syntactic roles. The word processing is familiar and stands for dealing with something using a standard procedure. Combined these two explain how HTML parser works in generating DOM trees from text/html resources.
5 min read
What is SASS?
Writing and managing CSS can become more challenging as web pages are more complex. Stylesheets are getting larger, more complex, and harder to maintain. A CSS pre-processor can be helpful in this situation. Sass reduces the repetition of CSS. It is free to download and use. Sass allows to use of fe
9 min read
HTML pre Tag
The pre tag in HTML defines a block of preformatted text, preserving spaces, line breaks, and tabs. It displays text in a fixed-width font, which can be styled using CSS. This tag is useful for displaying code, formatted text, and preserving text layout.HTML<!DOCTYPE html> <html> <bod
3 min read
Introduction to HTML
HTML stands for Hypertext Markup Language. It is the most basic language, and simple to learn and modify. It is a combination of both hypertext and markup language. It contains the elements that can change/develop a web page's look and the displayed contents. Or we can say that HTML creates or defin
6 min read
What is grouping in HTML ?
Grouping plays a vital role in our web page because it helps the developer to target specific classes and id which makes it easier to position, style, or manipulate the web page with the help of HTML, CSS, or JavaScript. Grouping can be performed with the help of various tags such as <div>,
2 min read