What is HTML Preprocessor ?
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:
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>.
!!! 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:
Example 3: In this example; we will learn how to use <blockquote>.
%blockquote %div GeeksforGeeks has best minds
HAML code code converted into HTML:
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 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.
%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.