HTML & HAML

6 min readFeb 3, 2021

I. Introduction:

If you have ever known LESS programming languages, Styles … They all create faster, more efficient CSS writing styles and if you have ever used them, you will appreciate the flexibility they bring to the project. your.

With HTML you will wonder why is it so verbose? Why didn’t someone simplify it? Today, we will learn how to use Haml to optimize HTML.

Haml (HTML Abstraction Markup Language) is a shortened markup language that makes writing HTML easier and can be used for many languages PHP, ASP, ERB … most commonly used is Ruby on Rails.

Original HTML

<html>
  <head>
    <title>Myspace</title>
  </head>
  <body>
    <h1>I am the international space station</h1>
    <p>Sign my guestbook</p>
  </body>
</html>

Convert to HAML

%html
  %head
    %title Myspace
  %body
    %h1 I am the international space station
    %p Sign my guestbook

II.The difference between HTLM and Haml.

Now that you have a basic concept of Haml in place, it’s time to see how it works?

With HTML:

<p>Hello World</p>

Notice that the simplest HTML structures have repetition. In Haml we replace that with the tag% p.

With Haml:

%p Hello World

Haml relies on white space to determine output, here is proof.

Haml:

%h3.title Halloween
%p.date Tuesday, October 31, 2006
%div
  %ul
    %li
      %a{:href => "#devices-tab"} Devices
    %li
      %a{:href => "#options-tab"} System Options
    %li
      %a{:href => "#reports-tab"} Reports
    %li
      %a{:href => "#notes-tab"} Notes

The first time you may be quite difficult but the above code is the code below, meaning they are completely equivalent. If we write the above Haml and put it in the interpreter, it will output the underlying HTML.

HTML:

<h3 class='title'>Halloween</h3>
 <p class='date'>Tuesday, October 31, 2006</p>
<div >
 <ul>
  <li ><a href="#devices-tab">Devices</a></li>
  <li><a href="#options-tab">System Options</a></li>
  <li><a href="#reports-tab">Reports</a></li>
  <li><a href="#notes-tab">Notes</a></li>
 </ul>
</div>

As you can see, the HTML version requires a lot of characters. Using Haml, we will save more than 30 keystrokes in a small piece of code. Multiplied by the entire website, you will see that is a huge number.

III.Reference

1.Classes and IDs

Without a traditional tag structure, you are wondering how to implement additional HTML items such as classed and IDs. With Haml, you absolutely can do it, and you’ll even feel strangely familiar.

Haml:

%div
  %ul.tabs
    %li#item
      %a{:href => "#devices-tab"} Devices
    %li#item
      %a{:href => "#options-tab"} System Options
    %li#item
      %a{:href => "#reports-tab"} Reports
    %li#item
      %a{:href => "#notes-tab"} Notes

As you can see the symbol “.” And “#” is used to denote classes and IDs, respectively. This is great because you are already familiar with this approach in CSS. Once you use CSS, you can use Haml completely. Here is how the code is executed.

HTML:

<div >
 <ul class="tabs">
  <li id="item"><a href="#devices-tab">Devices</a></li>
  <li id="item"><a href="#options-tab">System Options</a></li>
  <li id="item"><a href="#reports-tab">Reports</a></li>
  <li id="item"><a href="#notes-tab">Notes</a></li>
 </ul>
</div>

2.Divs

Let’s be honest that even the newest HTML5 elements we love are divs. Given that this is commonplace, Haml has had an exceptionally simple syntax. Consider doing this with Haml.

HTML:

<div id="someDiv">
</div>

With what we’ve learned, you won’t doubt that the “% div” syntax is needed here. However, Haml allows you to ignore all div syntax. To have the above HTML in Haml, all you need is:

Haml:

#someDiv

Just that is enough. This code is the complete div with an ID of “someDiv”. Even if you are skeptical it’s pretty concise. Again, we see the obvious benefit of writing markup as we do when we write CSS.

When you need to make sure you really know how it works, here’s a bigger example. This time we’ll use the main div and the two inner divs along with other elements.

Haml:

#container
  .box
    %h2 Some Headline
    %p Lorem ipsum doller your mom...
    %ul.mainList
      %li One
      %li Two
      %li Three  .box
    %h2 Some Headline
    %p Lorem ipsum doller your mom...
    %ul.mainList
      %li One
      %li Two
      %li Three

HTML:

<div id='container'>
  <div class='box'>
    <h2>Some Headline</h2>
    <p>Lorem ipsum doller your mom...</p>
    <ul class='mainList'>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
  <div class='box'>
    <h2>Some Headline</h2>
    <p>Lorem ipsum doller your mom...</p>
    <ul class='mainList'>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>

This time you have truly understood the power of Haml. The charm here goes beyond the fact that you save tons of characters and even a few lines, note how it’s easier to do in Haml. All the enclosed HTML has been removed and replaced with a clear markup hierarchy that you can easily see.

3.Boolean properties

Some properties, such as “checked” of input tags or “selected” of option tags, are “boolean”. In HTML these attributes can be written as

<input selected>

To do this in Haml using hash type properties, simply assign a true value of to the property:

%input{:selected => true}

4.Class and ID: (.) và (#)

Punctuation and sharps are borrowed from CSS. They are used as shortcuts to define the class and id attributes of an element. Multiple class names can be specified in a similar way to CSS, by concatenating the class names with dots. They are placed immediately after the tag and before an attributes hash. For example:

%div#things
  %span#rice Chicken Fried
  %p.beans{ :food => 'true' } The magical fruit
  %h1.class.otherclass#id La La La

is compiled into

<div id='things'>
  <span id='rice'>Chicken Fried</span>
  <p class='beans' food='true'>The magical fruit</p>
  <h1 class='class otherclass' id='id'>La La La</h1>
</div>

And,

%div#content
  %div.articles
    %div.article.title Doogie Howser Comes Out
    %div.article.date 2006-11-05
    %div.article.entry
      Neil Patrick Harris would like to dispel any rumors that he is straight

is compiled into

<div id='content'>
  <div class='articles'>
    <div class='article title'>Doogie Howser Comes Out</div>
    <div class='article date'>2006-11-05</div>
    <div class='article entry'>
      Neil Patrick Harris would like to dispel any rumors that he is straight
    </div>
  </div>
</div>

5.Filters

Wildcard specifies a filter. This allows you to pass the indented text block as input to another filter and add Haml’s output. Syntax is simply a colon, followed by the name of the filter. For example:

%p
  :markdown
    # Greetings    Hello, *World*

is compiled into

<p>
  <h1>Greetings</h1>  <p>Hello, <em>World</em></p>
</p>

The functionality of some filters like Markdown can be provided by many different libraries. Usually you don’t have to worry about this.
In some cases, however, you may want to use filters specifically. In this case, you can do this through Tilt, the library Haml uses to do many of its filters:

Tilt.prefer Tilt::RedCarpetTemplate

Below is a list of filters

cdata-filter
coffee-filter
css-filter
erb filter
escaped-filter
javascript-filter
less-filter
markdown filter
maruku-filter
plain-filter
preserve-filter
ruby-filter
sass filter
scss-filter
textile-filter

6. Make the IF condition and loop LOOP

One thing I like very much in HAML is that the support for IF ELSE conditional syntax is very intuitive and easy to use. Even a novice can easily understand and grasp this technique.
Example
from normal if else code in ERB

<% if signed_in? %>
  <li><%= link_to "Sign out", sign_out_path %></li>
<% else %>
  <li><%= link_to "Sign in", sign_in_path %></li>
<% end %>

You can re-code it with a much more visual code

- if signed_in?
  %li= link_to "Sign out", sign_out_path
- else
  %li= link_to "Sign in", sign_in_path

What about the loop function

- @my_patients_list.each do |patient|
  %tr
    %td= patient.name
    %td= patient.date_of_birth
    %td= patient.gender

too simple, right.

7.Render subpage

Moreover, HAML also supports nesting subpages into the main page with the render syntax, you can refer to one of the following ways:

the classic way

render partial: 'dog', locals: {dog: dog}

or newer way

render 'dog', dog: dog

the simplest way

= render dog

In addition HAML also supports rendering a set of ActiveRecord models:

= render partial: "dog", collection: @dogs

When written like this, HAML will generate a local variable dogfor you.

IV.Close:

If you’ve ever used Sass, LESS or Stylus bandwagon and are looking for a solution similar to HTML, Haml is your answer. It allows you to have simpler code, saves you time and all as easy as you get used to it.

The only pity is that Haml is a bit of a pain for those who are not Ruby developers simply because the documentation is directed towards Ruby. But I guarantee that even if you don’t know anything about Ruby, Haml is still quite enjoyable when you have experience with simple HTML.

Once you get the hang of the basics, give Haml a try on your projects. Check out the Haml website for more information and theHaml Cheatsheet bookmark, to help you get started faster.

Finally, all of you will find the right tool for your amazing projects. Let’s discuss and share if you have any questions!

To learn more about haml you can visit http://haml.info/ .

HTML & HAML

I. Introduction:

II.The difference between HTLM and Haml.

III.Reference

1.Classes and IDs

2.Divs

3.Boolean properties

4.Class and ID: (.) và (#)

5.Filters

6. Make the IF condition and loop LOOP

7.Render subpage

IV.Close:

Written by Kobe

No responses yet