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

:plainDoes 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.
:javas­criptSurrounds the filtered text with <sc­rip­t> and CDATA tags. Useful for including inline Javasc­ript.
:cssSurrounds the filtered text with <st­yle> and CDATA tags. Useful for including inline CSS.
:sassParses the filtered text with Sass to produce CSS output.
:textileParses the filtered text with Textile.
:makuruParses 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 10 Members:

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.