Show Menu

HAML Cheat Sheet by

A quick reference for HAML. See more information about HAML here:
development     html     web     frontend     markup     haml


<!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:

Download the HAML Cheat Sheet

1 Page

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors! is a collection of tools to make your writing better. More readable content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!



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.

          Related Cheat Sheets

          HTML4 Cheat Sheet
            HTML Cheat Sheet by Webmonkey

          More Cheat Sheets by specialbrand

          Markdown Cheat Sheet