Does it matter what container element to use for Experience Manager markup?

Question

While playing around with manually injecting XPM markup in rendered HTML I have noticed that it doesn't seem to matter what element precedes the HTML comments, as long as there is a container element that makes 'sense'. For example the following simple example enables a component presentation and heading, image and summary fields to be editable using <article>, <h1>, <div>, and <p> respectively:

<article>
    <!-- Start Component Presentation: {"ComponentID" : "tcm:4-82", "ComponentModified" : "2014-04-01T12:35:09", "ComponentTemplateID" : "tcm:4-83-32", "ComponentTemplateModified" : "tcm:4-83-32", "IsRepositoryPublished" : false} -->
    <h1><!-- Start Component Field: {"XPath":"tcm:Content/custom:Article/custom:headline"} -->Portugal</h1>
    <div>
        <!-- Start Component Field: {"XPath":"tcm:Content/custom:Article/custom:image"} --><img property="image" src="/media/example.jpg">
    </div>
    <p><!-- Start Component Field: {"XPath":"tcm:Content/custom:Article/custom:summary"} -->Portugal, officially the Portuguese Republic (Portuguese: República Portuguesa), is a unitary semi-presidential republic.</p>
    </div>
</article>

Does anyone know if this is coincidence, or if this is a supported feature of Experience Manager? If so, it would have significant benefits - in a lot of cases we can use the natural containers provided by the HTML design, freeing us from the restriction of only using one tag (like the default <span/>) which tends to break the HTML design and result in different markup on Staging vs Live.

Answer 1

XPM is intended to work with any tag, yes. The caveat is that it should be supported by the browser as a container element (and be valid in the context it is in). So basically, if you test it in the various browsers and the borders show up in the right place and you don't get any weird JavaScript errors, you're good to go.