UX Design and Development course

Haml - the OG of HTML pre-processors

Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications. However, Haml avoids the need for explicitly coding HTML into the template, because it itself is a description of the HTML, with some code to generate dynamic content.

Read more about Haml's core principals.

HAML and Rails

For the most part HAML was really designed as an alternative to ERB or Embded Ruby, the default modified HTML syntax for Rails.

Read more about Haml and Rails to see how this language fits the platform like a glove.

The basics of Haml

The core feature of Haml is the reduction of markup needed to create an HTML element. First off, you don't need the chevrons < ... > that surrounds the tag name. Next, you don't need closing brackets </ ... > either.

What is needed is, place a percent symbol % before the selector name.

Simple conversion


<strong>Hello, World!</strong>


%strong Hello, World!

Let's say that you want to add some attributes so this tag? Haml makes use of a Ruby syntax, {:key => "value"} as shown in the following example:


<strong class="code" id="message">Hello, World!</strong>


%strong{:class => "code", :id => "message"} Hello, World!

When adding a class or an ID, there is even an easier way to do this. After the element name, simply add the class with a period . or an ID with a hash # as shown in the following example:

%strong.code#message Hello, World!

Now, lets say that you just want to use a <div> with a class and/or ID? With Haml, you don't even need to state the %div tag as this is the default. In Haml just get into the meat of the selector as shown in the following example:

.code#message Hello, World!

WARNING! This is the classic put-fall of many developers. Getting into the habit of just assigning the class and/or ID selector to the element and always defaulting on the <div> of course reduces the semantic value of the document.

So, use Haml to be awesome, but don't be lazy!

Nesting elements

In HTML, the way you nest and HTML element is by physically placing one element within the other as shown in this example:

<article><header><h1>This is my header!</h1></header></article>

Haml on the other hand depends on whitespace to delineate elements. Whitespace == a return and a (2) space tab as illustrated in the following example:

    % h1 This is my header!


There it is. Want to play more with Haml? A great way to learn is to write some HTML that you are used to and run it through a converter to see how things shake out.