HAML Introduction

In this article, we’ll see HAML Introduction.

In the realm of web development, creating clean and concise markup is crucial for both developers and designers. HAML (HTML Abstraction Markup Language) steps up to the plate as a refreshing alternative to traditional HTML syntax.

With its concise and elegant structure, It simplifies the process of writing and maintaining markup code, ultimately enhancing the development experience.

It is HTML abstraction markup language. In other words, it’s a language you can use instead of HTML to create HTML files. It’s designed to make markup simple, easy to write, clean, readable, and adhering to the DRY principles.

Haml is easy to learn and is well documented. It saves your time because there are 30-40 percent less characters in Haml code than in ERB and you don’t have to write closing tags. This makes it incredibly easy to nest elements and declare the div tags.

It emphasizes using semantic tags because there is so much less markup.

It is the dominant alternative template language in the Ruby on Rails (web framework) world. You’ll find that most large shops either love it or hate it, but these days even the people that don’t like it actually end up knowing most of the syntax.

Haml has been created by Hampton Catlin in May 2006, and then maintained and developed by Nathan Weizenbaum for many years. The official implementation has been built for Ruby with plugins for Ruby on Rails.

There are also implementations for other languages (Python, PHP, Perl, Java, and more).

You can also use It on a project independent of Ruby, by installing the Haml gem on your machine and using the command line to convert it to html.

Here’s a sample haml file:

!!!
%html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", "xml:lang" => "en"}
  %head
    %title BoBlog
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    %link{"rel" => "stylesheet", "href" => "main.css", "type" => "text/css"}
  %body
    #header
      %h1 BoBlog
      %h2 Bob's Blog
    #content
      - @entries.each do |entry|
        .entry
          %h3.title= entry.title
          %p.date= entry.posted.strftime("%A, %B %d, %Y")
          %p.body= entry.body
    #footer
      %p
        All content copyright © Bob

The above haml file generates this XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>BoBlog</title>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
    <link href="/stylesheets/main.css" media="screen" rel="Stylesheet" type="text/css" />
  </head>
  <body>
    <div id='header'>
      <h1>BoBlog</h1>
      <h2>Bob's Blog</h2>
    </div>
    <div id='content'>
      <div class='entry'>
        <h3 class='title'>Halloween</h3>
        <p class='date'>Tuesday, October 31, 2006</p>
        <p class='body'>
          Happy Halloween, glorious readers! I'm going to a party this evening... I'm very excited.
        </p>
      </div>
      <div class='entry'>
        <h3 class='title'>New Rails Templating Engine</h3>
        <p class='date'>Friday, August 11, 2006</p>
        <p class='body'>
          There's a very cool new Templating Engine out for Ruby on Rails. It's called Haml.
        </p>
      </div>
    </div>
    <div id='footer'>
      <p>
        All content copyright © Bob
      </p>
    </div>
  </body>
</html>

Benefits of HAML

There are many benefits to using HAML. Some of the most important benefits include:

  • Conciseness: It is much more concise than traditional HTML. This can save you a lot of time and effort when writing your code.
  • Expressiveness: It is more expressive than traditional HTML. This can make your code more readable and maintainable.
  • Efficiency: It is compiled into traditional HTML, which makes it very efficient. This can improve the performance of your web applications.
  • DRY: It promotes the use of DRY (Don’t Repeat Yourself) code. This can help to improve the readability and maintainability of your code.
  • Learnability: It is relatively easy to learn. If you already know HTML, you can learn Haml in a matter of hours.
  • Community: There is a large and active community of Haml users and developers. This means that there are many resources available to help you learn and use Haml.

It offers a fresh perspective on markup, revolutionizing the way developers approach HTML. With its focus on aesthetics, simplicity, code reduction, and seamless integration with Ruby on Rails, It provides a powerful tool for crafting clean and maintainable markup code.

Whether you’re a seasoned developer looking for a more efficient workflow or a newcomer seeking an elegant introduction to web development, It is undoubtedly worth exploring. Give HAML a try, and experience the elegance of markup simplified.

I hope this article helps!

Last updated on June 2nd, 2023.