基本的なHaml記法
Hamlとは
まずHamlという言葉自体を理解することで、この言語の役割が見えてくると思ったのでそこから説明します！
Hamlは、"HTML abstraction markup language" の略称です。"abstraction"の訳が"抽象的"とありますが、これはwikipediaによると・・・
抽象化（ちゅうしょうか、英: Abstraction、独: Abstraktion）とは、思考における手法のひとつで、対象から注目すべき要素を重点的に抜き出して他は捨て去る方法である[1]。反対に、ある要素を特に抜き出して、これを切り捨てる意味もあり、この用法については捨象（しゃしょう）という[1]。
ja.wikipedia.org
う〜ん、わかりますか？（笑）。個人的には "要素を重点的に抜き出し" という所に注目し、簡略化するということなのかなと考えました。"抽象化"の反対語が"具体化"なので、まあこんな感じの認識でいいんですかね。
ちなみに答えはHamlの公式サイトを見ると分かり、（最初からここを見ろよ！笑）
haml.info
Hamlを使用することで、「綺麗に」、「読みやすく」、「生産的に」ビューを作成することができる。
と訳すことができると思います。
つまり、HTMLより記述量が少なく済み、非常に綺麗に簡潔に作成することが可能ということです。
タグの表記
さて前置きが長くなってしまいましたが本題に入って、
まずはタグについてHaml記法とHTMLとを比較します。
%body %div これはタグ
このように%を使用します。もうひとつ、適切にインデントされていないとエラーを起こします。
これをHTMLで表記すると
<body> <div> これはタグ </div> </body>
classやidの指定
%div.content#red .でcontentというクラスを指定、#でredというidを指定
<div class = "content" id = "red"> .でcontentというクラスを指定、#でredというidを指定 </div>
divタグは省略できる
divタグは頻繁に用いるので以下のように省略して記述することが可能です。
%div.content#red 省略前
.content#red 省略後
