Why HAML is future of web and HTML, All about HAML.

What is haml ?haml_1-5_logo

At its core, Haml is a lightweight markup language.

Its, HTML Abstraction Markup Language

Haml makes writing HTML much easier, and when I say “much easier” what I really mean is “you won’t believe how much time you can save by using Haml.” In my opinion, it’s even more of an obvious time saver than Sass. Many developers take one look at Sass and think, “Neat! But I don’t really see a need for it.” With Haml, almost every developer, whether they would ever consent to use it or not, should immediately see the intense timesaving benefits that it brings.


The main disadvantage of using HAML over HTML is simply that HTML is just about universal among web developers, where as the HAML community is still a relatively small community. This would undoubtedly make finding developers to work on your project in the future a more daunting task.
You never need to worry about missing a closing tag because the HAML parser will throw an exception and give you a line number. It’s quick, it’s short, it’s legible.

  • easy to read and visually expresses your DOM hierarchy
  • code is shorter as closing tags are eliminated

Difference between html and haml

Browsers only understand HTML. HAML is just a templating language that gets transformed into HTML (e.g. same final output). If you find the HAML syntax to be easier than HTML then go for it.

Who can use

Everyone who writes HTML can use Haml in some respect. Sure, you won’t use all of the features, but I’m sure you don’t use all of Photoshop’s features either but you still fire it up it on a daily basis.

My point is, if you’ve never written a line of Ruby in your life and don’t plan to, don’t let that scare you off from Haml. It’s still immensely fun.

Into Action

The beauty of Haml is that it’s “DRY”, meaning there’s been an attempt to strip out as much of the annoying inherent HTML repetition as possible.

Haml is whitespace dependent, meaning it uses the visual structure of your code to determine the HTML output.


<p>Hi I'm HTML paragraph</p>

Here this small single line has repetition, the starting and closing tag obviously.



%p Hi I'm HTML paragraph

“impresionante it’s done :D”.

You would say “No it isn’t enough” , I need more examples :

We are using traditional html since logs with all its tags how can we implement them here in haml, your concern is right lets see.

Classes and Ids

Same (.) & (#) :

haml html1

You want to say something now 🙂

haml code

code snap: for showing proper indentation

After compilation the HTML goes like:

haml html

Code Snap

Just the game of % and identation.

Different HTML Tags

Now you will think about tags that aren’t common, like footer, section, or may be anyThing

So HAML does not care about what tags are, just follow the syntax and all is yours.


haml html3

Here comes your real concern, Can i use HAML syntax in my HTML,

So offcourse it’s, Yes

Mixing HAML with Your HTML

Go with an example:

haml html5

Compiling HAML to HTML

Since long we are trying the code and talking about compilation, now its time to compile it, but before going to command line, lets use some handy online tools.

Here is online compilor side by side, just type in or paste your code and get compiled haml easily, Handy !!

Check here

You can directly install HAML:

gem install haml

For local usage, if you are mac user you got lucky here, a special tool for you is: chocolatapp

You can checkout codekit multipurpose.

Check out Live Reload, that is always infront of you.


If you enjoyed using Sass, less and want to have same feeling for html, then HAML is a star for your innocent eyes :p.

Yes dont forget to checkout the official site of HAML .

About Nikhil Kumar

Senior Software Consultant at Knoldus Software LLP.
This entry was posted in HAML, Scala, Web, Web Designing, Web Standard and tagged , , , , . Bookmark the permalink.

6 Responses to Why HAML is future of web and HTML, All about HAML.

  1. Nice post! I love HAML and use it when I code! Thanks for the clear explanation on HAML and its advantages. Another interesting post idea would be on Jade. Keep up the good work! 🙂

  2. In my opinion, Jade is much easier and powerful than HAML, and is widely used.

  3. Pingback: Essentials and future of web development, HAML, Jade, Emmet & Slim. | Knoldus

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s