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
4
<h2>GeeksforGeeks, A Computer Science portal for geeks.</h2>
5
6
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...