Show Menu
Cheatography

A quick reference for HAML. See more information about HAML here: http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html

Doctype

!!!
<!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­">

Filters

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

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

Some Filters Available To Use

:plain
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.
:javas­cript
Surrounds the filtered text with <sc­rip­t> and CDATA tags. Useful for including inline Javasc­ript.
:css
Surrounds the filtered text with <st­yle> and CDATA tags. Useful for including inline CSS.
:sass
Parses the filtered text with Sass to produce CSS output.
:textile
Parses the filtered text with Textile.
:makuru
Parses the filtered text with Maruku, which has some non-st­andard extensions to Markdown.
 

Elements

%p
 ­ A paragraph
 ­ ­%strong bold

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

Attributes

%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

%br
%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

%div#t­hings
 ­ ­%sp­an#rice Chicken Fried
 ­ ­%p.b­eans{ :food => 'true' } The magical fruit
 ­ ­%h1.cl­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>
</d­iv>

Implicit Div Elements

#colle­ction
 ­ .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>
</d­iv>

Comments

HTML Comments: /

%peanu­tbu­tte­rjelly
 ­ / This is the peanut­but­ter­jelly element
 ­ I like sandwi­ches!

is compiled to:
<pe­anu­tbu­tte­rje­lly>
 ­ ­<!-- This is the peanut­but­ter­jelly ellement -->
 ­ I like sandwi­ches!
</p­ean­utb­utt­erj­ell­y>

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

is compiled to:
<p>­foo­</p>
<p>­bar­</p>
                   

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Metadata

  • Languages:
  • Published: 5th January, 2012
  • Last Updated: 11th May, 2016
  • Rated: 5 stars based on 19 ratings

Favourited By

Werimpossible wizzdm johnd0e BlueNotes moalex horsedisco markhuyong cemal96 walsh MrBigwelly brazacka
and 13 more ...

Comments

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

          More Cheat Sheets by specialbrand

          Markdown Cheat Sheet