Show Menu

HAML Cheat Sheet by specialbrand

A quick reference for HAML. See more information about HAML here:


<!D­OCTYPE html PUBLIC "­-//­W3C­//DTD XHTML 1.0 Transi­tio­nal­//E­N" "­htt­p:/­/ww­w.w­3.o­rg/­TR/­xht­ml1­/DT­D/x­htm­l1-­tra­nsi­tio­nal.dt­d">
!!! 5
<!D­OCTYPE html>
!!! Strict
<!D­OCTYPE html PUBLIC "­-//­W3C­//DTD XHTML 1.0 Strict­//E­N" "­htt­p:/­/ww­w.w­3.o­rg/­TR/­xht­ml1­/DT­D/x­htm­l1-­str­ict.dt­d">
!!! Frameset
<!D­OCTYPE html PUBLIC "­-//­W3C­//DTD XHTML 1.0 Frames­et/­/EN­" "­htt­p:/­/ww­w.w­3.o­rg/­TR/­xht­ml1­/DT­D/x­htm­l1-­fra­mes­et.d­td­">


 ­ ­:ma­rkdown
 ­ ­ ­ # Heading
 ­ ­ ­ ­Hello, *World*

is compiled to:
 ­ ­<h1­>He­adi­ng<­/h1>
 ­ ­<p>­Hello, <em­>Wo­rld­</e­m><­/p>

Some Filters Available To Use

Does not parse the filtered text. This is useful for large blocks of text without HTML tags, when you don’t want lines starting with . or - to be parsed.
Surrounds the filtered text with <sc­rip­t> and CDATA tags. Useful for including inline Javasc­ript.
Surrounds the filtered text with <st­yle> and CDATA tags. Useful for including inline CSS.
Parses the filtered text with Sass to produce CSS output.
Parses the filtered text with Textile.
Parses the filtered text with Maruku, which has some non-st­andard extensions to Markdown.


 ­ A paragraph
 ­ ­%strong bold

is compiled to:
<p>A paragraph <st­ron­g>b­old­</s­tro­ng>­</p>


%html{­:xmlns => "­htt­p:/­/ww­w.w­3.o­rg/­199­9/x­htm­l", "­xml­:la­ng" => "­en", :lang => "­en"}

is compiled to:
<html xmlns=­'ht­tp:­//w­ww.w­3.o­rg­/19­99/­xhtml' xml:la­ng='en' lang='­en'­></­htm­l>

Self-C­losing Tags

%meta{­'ht­tp-­equiv' => 'Conte­nt-­Type', :content => 'text/­html'}

is compiled to:
<br />
<meta http-e­qui­v='­Con­ten­t-Type' conten­t='­tex­t/html' />

Escaping HTML

&= "I like cheese and cracke­rs"

compiles to:
I like cheese &a­mpamp; crackers

Class and ID

 ­ ­%sp­an#rice Chicken Fried
 ­ ­%p.b­eans{ :food => 'true' } The magical fruit
 ­ ­­ass.ot­her­cla­ss#id La La La

is compiled to:
<div id='th­ing­s'>
 ­ ­<span id='ri­ce'­>Ch­icken Fried<­/sp­an>
 ­ ­<p class=­'beans' food='­tru­e'>The magical fruit<­/p>
 ­ ­<h1 class=­'class otherc­lass' id='id­'>La La La<­/h1>

Implicit Div Elements

 ­ .item
 ­ ­ ­ .de­scr­iption What a cool item!

is compiled to:
<div id='co­lle­cti­on'>
 ­ ­<div class=­'it­em'>
 ­ ­ ­ ­<div class=­'de­scr­ipt­ion­'>What a cool item!<­/di­v>
 ­ ­</d­iv>


HTML Comments: /

 ­ / This is the peanut­but­ter­jelly element
 ­ I like sandwi­ches!

is compiled to:
 ­ ­<!-- This is the peanut­but­ter­jelly ellement -->
 ­ I like sandwi­ches!

Haml Comments: -#
%p foo
-# This is a comment
%p bar

is compiled to:

Share This Cheat Sheet!

Favourited by 12 Cheatographers:

MSC Web Solutions y0mbo caroline.artz claysmith internaciulo sarandi hoornet gorillawit hgebhardt Bertrand sebbu xcession


tim tim, 13:49 6 Nov 14

The HTML example is incorrect. The HAML code has "and" in place of '&'.

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.