Why is HAML swapping tag positions? - html

Question

This HAML (with chained helpers):
- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2 local3, local4 ) do
%div{ style: helper_method_3(local5, local6) }
%span= local7
%h3{style: "color: black"}= local8
Is generating this (inverted) HTML:
<div style="prop1: val:1; prop2: val2;"></div>
<span>Span Text</span>
<h3 style="prop3: val3;">H3 Text</h3>
<a class="class-value" id="id-value" href="href-value"></a>
But if we remove the chained method, like:
(...)
- haml_tag :a, helper_method_1(local1, local2) do
(...)
Than HTML renders as expected:
<a class="class-value" id="id-value" href="href-value">
<div style="prop1: val:1; prop2: val2;"></div>
<span>Span Text</span>
<h3 style="prop3: val3;">H3 Text</h3>
</a>
What's wrong with HAML?

Answer 1

Problem solved by changing this line:
- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2 local3, local4 ) do
Into this line (added parenthesis on helper_method_2):
- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2(local3, local4) ) do
This is an incomplete answer.
Please feel free to extend/edit it.

Answer 2

I'd guess that HAML is producing the HTML you're expecting but the browser is rewriting it to conform to an HTML standard.
Let us look at what HTML4 has to say about <a>:
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
and inline means:
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
If you look at fontstyle, phrase, special, and formctrl, you won't find <div> or <h3> in any of those lists so neither <a><div></div></a> nor <a><h3></h3></a> are valid HTML4.
HTML5 has this to say about what an <a> can contain:
Permitted contents
Transparent (either phrasing content or flow content)
Transparent content means:
If the content model of a particular element foo is described as
transparent, it means:
when element foo is a child of a parent element bar whose content model is allowed to contain flow elements, then the contents
of element foo may also contain flow elements
when element foo is a child of a parent element baz whose content model restricts its child elements to only being phrasing
elements, then any child elements of element foo are also restricted
to only being phrasing elements
A <div> is a flow element but not a phrasing element, <h3> is also a flow element rather than a phrasing element. So, if you're in HTML5 mode, your <a> would need a parent element that can contain flow elements. I don't think this applies though; I'd expect the browser to restructure things even more if HTML5 was being used and the <a>'s parent didn't allow flow elements, it would have to move the <div> and <h3> up one more level to get past the restriction to phrasing elements.
I'd guess that your browser thinks it is rendering HTML4 or it isn't quite up to date on what HTML5 says.
You have some options:
Look at the HTML that HAML produces, don't ask the browser, look at the raw output before the browser can do anything to it. This will tell you who is changing things.
Make sure your HTML is being rendered as HTML5.
Restructure your HTML to match the relevant standard, you might have to compensate for outdated but overzealous browsers here. This may require you to use something other than <div> and <h3> inside your <a>.