Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is HTML Preprocessor ?

  • Last Updated : 09 Sep, 2021

In this article, we will learn about the HTML pre-processor & will explore the pre-processor used for HTML. As its name suggests, the 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 & CSS. The pre-processor is made for the purpose of including new features with the existing ones without violating the browser compatibility. The reason for being adding the pre-processor is given below:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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 preprocessor 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 the web documents that 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 code converted in HTML: 
 

HTML




<body>
    <center>
        <header>
            <h1>GeeksforGeeks</h1>
        </header>
        <section>
            <b>A Computer Science Portal for Geeks</b>
        </section>
    </center>
</body>

Output:

Note: The Haml code will reduce the code readability for the HTML code but 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 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 organised 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 the 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 preprocessors 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.



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!