In the previous section we saw when traditional HTML increases with complexity, it decreases in readability. It was from this perspective that Hampton came up with the four principals to good programming with HAML.
Where HTML requires open and closing tags, HAML does not. Where HTML does not require indentation, HAML enforces it. The beauty of HAML is in it's lack of repetition, aka Do Not Repeat Yourself (DRY). HAML removes the angle brackets (chevrons) < ... > and replaces them with a single % symbol. To reduce repetition, HAML also removes of the need for a closing tag. Notice in the following example that only an opening tag with a % symbol is required to open a new HTML block.
%article
... content ...
Earlier I stated that HTML requires nested tags to be physically nested within each other in the markup. Following the principals of Markup should be well-indented and XHTML structure should be clear, HAML takes a more specific approach. Each return signifies a new block and a return with a two-space indent signifies a nested tag.
In the following example you will see how the <article> ... </article> tags are simply replaced with %article. You should also notice how I used indentation to nest the %h1 and %p tags within %article. Last, see how I nested the %a tag within the %p tag.
%article
%h1 primary header title for paragraph below
%p
%a{:href => "#"} Example of body text link
HAML doesn't stop there. In the previous section I showed how simple HTML can get harder to read by adding attributes to the markup. HAML helps this by removing statements like class="..." and id="...".
The following example illustrates how HAML simply refers to an id by using the pound # symbol and a class is simply referred to with a period . symbol. Using this method I can take a HTML statement like <article class="primary-article" id="main-author" ... and reduce it to something as simple as %article#main-author.primary-article.
%article#main-author.primary-article
%h1 primary header title for paragraph below
%p
%a{:href => "#"} Example of body text link
HTML href tags aren't exactly reduced in HAML, but the syntax uses a Ruby key:value pair style. Notice in the example how I replaced <a href="#"></a> with %a{:href => "#"}.
HAML was a radical new way of looking at HTML. HAML embraces standardized HTML and makes it easier to write, and cleaner to read.
It was from the success of these powerful concepts that the idea of Sass was born.