HTML vs HAML - some differences
1) HTML: <tag> random text </tag>
HAML: %tag random text
2) For inner tags (please note: whitespace indentations here are meaningful in HAML, unlike in HTML):
HTML: <tag> random text
<subtag> other text </subtag>
</tag>
HAML: %tag random text
%subtag other text
3) For the CSS selector "class" with a random HTML element, say <ul>:
HTML: <ul class="ACSSClass"> random text </ul>
HAML: %ul.ACSSClass random text
4) For the CSS selector "id" with a random HTML element, say <article>:
HTML: <article id="ACSSID"> random text </article>
HAML: %article#ACSSID random text
5) For the CSS selector "class" with the div HTML element:
HTML: <div class="randomclass"> some text </div>
HAML: .randomclass some text
6) For the CSS selector "id" with the div HTML element:
HTML: <div id="randomid"> some text </div>
HAML: #randomid some text
7) For combining two CSS classes in the same tag -
HTML: <div class="class1 class2"> some random text </div>
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.
No comments