HTML vs HAML – some differences

1) HTML: random text

HAML: %tag random text

2) For inner tags (please note: whitespace indentations here are meaningful in HAML, unlike in HTML):

HTML: random text

             other text

HAML: %tag random text

               %subtag other text

3) For the CSS selector “class” with a random HTML element, say

:

HTML:

random text

HAML: %ul.ACSSClass random text

4) For the CSS selector “id” with a random HTML element, say

:

HTML:

random text

HAML: %article#ACSSID random text

5) For the CSS selector “class” with the div HTML element:

HTML:

some text

HAML: .randomclass some text

6) For the CSS selector “id” with the div HTML element:

HTML:

some text

HAML: #randomid some text

7) For combining two CSS classes in the same tag –

HTML:

some random text

HAML: .class1.class2 some random text

8) For embedded Ruby code –

HTML: <%= yield %>

HAML: = yield

Note: You can always write normal HTML code in a HAML document.

]]>