Haml | HTML Pre-processor

09 Sep, 2021
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 closing the tab and repeating the same attribute for the same element and it will lead to inefficiency. To overcome these problems there exists the Pre-processors. So, The Pre-processors in HTML are nothing but the same as that in other languages, it takes the input in the form of data and it converts in other types of data. In the case of markups like HTML and CSS, the popular preprocessor includes Haml and Sass. 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. As preprocessors are the programs they are always processed in some languages hence the Haml processed in HTML and Sass.HAML Pre-processor: Haml stands for HTML Abstraction Markup Language created by Hampton Catlin and the only objective behind to create it is to make the markup beautiful. It 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 user can install it from here. To install the Haml follow the below commands.  
For installing the HAML:gem install haml 
gem install haml 
For converting the HAML to HTML:haml index.haml index.html
haml index.haml index.html
Note: Command should be run inside the same directory where the index file resides.Examples:
Code for the header in Haml Pre-Processor:  
html
%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 : The output of the above HTML or the HAML code.  
Note: The Haml code will reduce the code readability for the HTML code but code reduced syntactically and also by line. 
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.
akshitsaxenaa09
HTML-Misc
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Angular File Upload
Form validation using jQuery
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array