actionlink manipulates html render order in nested anchor

Question

I'm having a problem and i'm really puzzled by it.

My markup is simple enough:

@foreach (var item in Model.Items)
{
    <a class="mapIconUnit" id="[email protected]()">
        @Url.Action("DeletePin") <!-- testing purposes -->
        @(Ajax.ActionLink("x", "DeletePin", MapAdministrationController.Routes.DeletePin(item.PinGuid), new AjaxOptions()
            {
                OnSuccess = "onMapPinDeleted",
                Confirm = Resources.Resource.msg_GenericDeleteConfirmationQuestion
            }
        ))
    </a>
}

Now what i would expect to render from this is:

<a class="mapIconUnit" id="...">
    ... rendered url
    <a href="..." etc>x</a>
</a>

But what i am getting is:

<a class="mapIconUnit" id="...">
    ... rendered url
</a>
<a href="..." etc>x</a>

What am i doing wrong here? The markup is too simple for it to be wrong to cause such a thing?

Answer 1

It's illegal to nest an anchor element inside another anchor element, more info can be found in the W3C specs: http://www.w3.org/TR/html401/struct/links.html#h-12.2.2

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

So either razor or the webbrowser renders the elements correctly (i.e. place them next to each other).