Visualforce rerendering a tags with nested div

Question

I have an apex:outputPanel tag with an a tag inside it, with a div inside it, like so:

<apex:outputPanel id="myPanel">
    <a href="http://google.com">
        <div>Test</div>
    </a>
</apex:outputPanel>

When this originally renders, it renders as expected:

<span id="j_id0:j_id302:j_id303:myPanel">
    <a href="http://google.com">
        <div>test</div>
    </a>
</span>

But when I run an apex:actionFunction that rerenders myPanel, it renders as such:

<span id="j_id0:j_id302:j_id303:myPanel">
    <a href="http://google.com"></a>
    <div>test</div>
</span>

I want the div to be inside the a tag just like the first render. Is there a reason this happens?

Answer 1

The HTML specification forbids block elements inside of inilne elements. MDN says this about inline elements:

Generally, inline elements may contain only data and other inline elements. You can't put block elements inside inline elements.

I believe that the Visualforce runtime is bumping the block element outside of the inline element in order to adhere to this rule. This does not happen if you replace the div with a span. Here's a self-contained example.

<apex:page>
    <apex:form>
        <apex:outputPanel id="render1">
            <a href="https://www.google.com/">
                <span>
                    This link works okay...
                </span>
            </a>
        </apex:outputPanel>
        <apex:actionFunction name="doAction1" reRender="render1" />
    </apex:form>
    <button onclick="doAction1(); return false;">
        Do ReRender
    </button>
    <br />    
    <apex:form>
        <apex:outputPanel id="render2">
            <a href="https://www.google.com/">
                <div>
                    This link <b>DOES NOT</b> work okay...
                </div>
            </a>
        </apex:outputPanel>
        <apex:actionFunction name="doAction2" reRender="render2" />
    </apex:form>
    <button onclick="doAction2(); return false;">
        Do ReRender
    </button>
</apex:page>