Introduction to Haml

Show Notes

Haml is the brain child of Hampton Catlin. In this screencast we’re going to show how Haml can simplify your markup and speed up front-end development.

As developers we naturally gravitate towards products or languages that help keep our work clean and organized. Haml is just one of those things. Watch this screencast to see why!


You may also be interested in our Introduction to Sass screencast.

Today we’re going to show how Haml can simplify your markup and speed up front-end development.

Haml is the brain child of Hampton Catlin and stands for HTML Abstraction Markup Language.

As developers we naturally gravitate towards products or languages that help keep our work clean and organized.

Most of us prefer webkit-based browsers that render things properly, and can even let you get by with a couple mistakes here and there, but sometimes we still have to hack code for hours just to get a site to render correctly in IE6.

When given the choice we try to use one of the increasing number of RESTful JSON services for data, but sometimes we still have to deal with XML and crazy SOAP services.

We all prefer the jobs where we get to create a fresh site with clean markup, but sometimes we still have to maintain a site written in an obtrusive version of Dreamweaver.

So being a developer today means tolerating the ugly code when we have to, but we should always be proactively searching for new ways to write beautiful, simple code.

So why Haml? Let’s start by looking at a piece of HTML

HTML is XML’s ugly cousin.

Like XML, HTML is a nested data structure.

If we write our HTML in an indented style like this, the closing tags aren’t really needed, because the new lines and indentations can also help us understand where each element is nested in the DOM.

Lets tuck that right column up to the left column, just for niceness.

Ok, done.

OK now lets make it a little more beautiful. Let’s remove the less-than and greater-thans.

OK, now let’s remove the id-equals and the class-equals. Basically, we’re getting rid of all the things that are repeated.

So now it’s starting to look simple, and more like CSS.

But as you can see we’re still repeating %div. Lets assume that if an element isn’t specified it’s just a div.

So this is what we’re left with... Haml!

When using Haml as a templating language, it looks like this:

To render a ruby expression, all you have to do is put the equal sign after the selector.

As you can see from this, it’s a lot like CSS. So Haml makes the syntax for writing your markup more in line with what you’re familiar with from CSS.

You don’t have to remember to remove the # symbol from IDs, or the period before classes. If you’re already speaking in CSS selectors with CSS and jQuery, you’re already talking in HAML.

So Haml has...meaning.

Your markup is semantic.

It’s DRY. Your not repeating yourself.

It’s concise and to the point.

You can focus on what matters. There’s very little switching between contexts in writing your markup for content and style.

You’re not worrying about closing tags or the mechanics of HTML. You can write your markup much quicker. And it’s beautiful. Look...

And as you can see Haml is easier to read. This is especially true when it comes to ERB.

It’s a lot easier to see where the user’s address is in the Haml, compared to the ERB.

Haml is currently implemented in a number of languages. Ruby, Python, Lua, .NET, Scala, PHP and even Java.


Most of us haven’t memorised the XHTML Transitional or Strict doctype declaration.

Thankfully Haml does all of the proper conversion for you, so you only need remember the Haml 3-exclamation-mark declaration - !!!.

The percent sign before a line indicates an element, %html means the html tag, %head for the head tag, and so forth.

If your want to add attributes to an html tag, you include a structure like this. It’s very similar to HTML.

Elements that don’t have the element specified are assumed to be divs.

Haml relies on indenting for formatting, and you indent with two spaces. Add an additional two for every nested level of tags. We have to do this because HTML is a nested data structure, like XML. The indentation of the document is translated into HTML’s opening and closing tags. This is necessary for the page’s construction, and also for search engine spiders to interpret meaning. Installation & Usage

To get started with Haml, you simply need to install it by running gem install haml.

You can use Haml as a command line tool to output HTML.

In it’s command line form, Haml outputs as XHTML transitional by default.

So when we type in haml index.haml (which is our input) index.html (which is our desired output file) we see this file generated.

However you can pass in an argument using -f with the format you’d like to use for output.

As you can see an HTML5 document has been generated.

You can also give haml a try online without installing it, by visiting

We hope you’ve enjoyed having a taste of what Haml has to offer, and hopefully it will be another tool in your arsenal that can be used in your upcoming web development projects.

We’ll be covering Haml usage in upcoming Screencasts using Sinatra and Rails 3... So we hope to see you then!