Last Updated: February 25, 2016
· sativaware

Introduction to HAML

What is HAML?

Haml is a markup language that is used to cleanly and simply describe the HTML of any web document without the need to hand-code HTML.

HAML can easily be integrated with both Sinatra and Ruby on Rails - which allows you to write your views in HAML.

A typical HTML document

Lets look at the HTML markup for a typical page seen on the web:

    <title>Sativaware : Introduction to HAML</title>
    Haml is a markup language  ...

In this HTML document we see opening & closing tags for fundamental HTML tags such has head, title and body - in addition to being nested within each other. The indenting is for reading convenience only and its structure is derived from nesting the elements.

Lets now take a look at the same typical page, in HAML:

      Sativaware : Introduction to HAML
    Haml is a markup language  ...

The document becomes more concise. The fundamental elements are defined with a prefixed percentage sign(%) followed by the name of the element i.e %head, %body. HAML is indented using white-space, which forms the structure - closing tags are omitted.

Here are some common HTML elements you will be familiar with - expressed in HAML(Note the white space indenting)

%h1 I am a big header
%h2 Slightly smaller header
%h3 An even smaller header

  I am inside a span element

  A div element

  A paragraph of text

  %li First unordered item
  %li Second unordered item

    %td I am Cell 1
    %td I am Cell 2

Defining element IDs

A common aspect of describing an HTML document is giving elements ids and assigning css classes — lets take a look at assigning an id to a div element.

<div id='main-section'>
  Sativaware : Introduction to HAML

In haml we can express the above as follows

  Sativaware : Introduction to HAML

In HAML — Element IDs are prefixed with a hash(#) i.e #main-section and again we see a div being created using the percentage sign(%) prefix followed by the name of the element i.e %div

If we want to make the HAML more consise we can use the following:

  Sativaware : Introduction to HAML

By default, HAML will assume a div element where an element tag(i.e. %div) is ommited.

Assigning CSS classes on elements

Lets say we have two CSS classes in your stylesheet as follows:

/* stylesheet.css */

.box {
  background-color: #F5F5F5;

.rounded {
  border-radius: 10px;

To make use of these two CSS classes in HAML - lets create a div and assign the .box class.
  This is a box

If you wanted to expand on that and add the additional .rounded css class you would do the following:
  This is a rounded box

The above examples would produce the following HTML respectively:

<div class='box'>
  This is a box

<div class='box rounded'>
  This is a rounded box

Reference links

Intro to HAML on

Intro to HAML

HAML's official site

HAML tutorial