The XPM markup used on a staging website is written in the form of HTML comments. It would very practical if we can use HTML5 data attributes instead.

The use of HTML comments is not always practical:
- Frontend frameworks (JavaScript in the browser) can remove HTML comments. Vue for example removes all HTML comments, and this behaviour cannot be disabled.
- CDNs can interfere with HTML comments. Akamai for example has a feature which strips unnecessary things like HTML comments from the page.

Since the introduction of Experience Manager (known as SiteEdit at the time) a lot has changed and today it is possible to use HTML5 data attributes.

Instead of this

<article class="col-md-6" prefix="s: http://schema.org/" typeof="s:Article">
<!-- Start Component Presentation: {"ComponentID":"tcm:29-2603","ComponentModified":"2017-01-20T15:51:54","ComponentTemplateID":"tcm:29-2602-32","ComponentTemplateModified":"2017-01-23T12:00:19","IsRepositoryPublished":false} -->

<h1 property="s:headline">
<!-- Start Component Field: {"XPath":"tcm:Content/custom:Article/custom:heading[1]"} -->
Hello, World!
</h1>

We could have something like this

<article class="col-md-6" prefix="s: http://schema.org/" typeof="s:Article"
  data-xpm-componentId="tcm:29-2603" data-xpm-componentModified="2017-01-20T15:51:54" data-xpm-componentTemplateId="tcm:29-2602-32" data-xpm-componentTemplateModified="2017-01-23T12:00:19" data-xpm-isRepositoryPublished="false">

<h1 property="s:headline" data-xpm-fieldXpath="tcm:Content/custom:Article/custom:heading[1]">
  Hello, World!
</h1>