{"id":53,"date":"2013-12-26T16:38:00","date_gmt":"2013-12-26T16:38:00","guid":{"rendered":"http:\/\/363@jodohost.com\/\/blog\/"},"modified":"2013-12-26T16:38:00","modified_gmt":"2013-12-26T16:38:00","slug":"html-vs-haml-some-differences","status":"publish","type":"post","link":"http:\/\/www.jodohost.com\/blog\/index.php\/2013\/12\/26\/html-vs-haml-some-differences\/","title":{"rendered":"HTML vs HAML &#8211; some differences"},"content":{"rendered":"<p>1) HTML: <tag> random text <\/tag><\/p>\n<p>HAML: %tag random text<\/p>\n<p>2) For inner tags (please note: whitespace indentations here are meaningful in HAML, unlike in HTML):<\/p>\n<p>HTML: <tag> random text<\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <subtag> other text <\/subtag><\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tag><\/p>\n<p>HAML: %tag random text<\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %subtag other text<\/p>\n<p>3) For the CSS selector &#8220;class&#8221; with a random HTML element, say <\/p>\n<ul>:<\/p>\n<p>HTML: <\/p>\n<ul class=\"ACSSClass\"> random text <\/ul>\n<\/p>\n<p>HAML: %ul.ACSSClass random text<\/p>\n<p>4) For the CSS selector &#8220;id&#8221; with a random HTML element, say <\/p>\n<article>:<\/p>\n<p>HTML: <\/p>\n<article id=\"ACSSID\"> random text <\/article>\n<\/p>\n<p>HAML: %article#ACSSID random text<\/p>\n<p>5) For the CSS selector &#8220;class&#8221; with the div HTML element:<\/p>\n<p>HTML: <\/p>\n<div class=\"randomclass\"> some text <\/div>\n<\/p>\n<p>HAML: .randomclass some text<\/p>\n<p>6) For the CSS selector &#8220;id&#8221; with the div HTML element:<\/p>\n<p>HTML: <\/p>\n<div id=\"randomid\"> some text <\/div>\n<\/p>\n<p>HAML: #randomid some text<\/p>\n<p>7) For combining two CSS classes in the same tag &#8211;<\/p>\n<p>HTML: <\/p>\n<div class=\"class1 class2\"> some random text <\/div>\n<\/p>\n<p>HAML: .class1.class2 some random text<\/p>\n<p>8) For embedded Ruby code &#8211;<\/p>\n<p>HTML: <%= yield %><\/p>\n<p>HAML: = yield<\/p>\n<p>Note: You can always write normal HTML code in a HAML document.<\/p>\n<p> ]]><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 other text \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HAML: %tag random text \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 %subtag other text 3) For the CSS selector &#8220;class&#8221; with a random HTML element, say : HTML: random text [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"http:\/\/www.jodohost.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/53"}],"collection":[{"href":"http:\/\/www.jodohost.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jodohost.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jodohost.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jodohost.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":0,"href":"http:\/\/www.jodohost.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.jodohost.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jodohost.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jodohost.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}