SharePoint 2013 Mark-ups in HTML snippet

HTML snippet contains 4 basic elements:

1.       Header: with starting <div> and <!—CS> tags

2.       SP mark up: where snippets are enclosed in <!—MS> start and <!—ME> end tags

3.       HTML preview: enclosed in <!—PS> and <!—PE> tags

4.       Footer: with <!—CE> and </div> tags

All the above elements except HTML preview are enclosed in HTML comments to avoid interaction with DOM. A snippet starts with the name of a component, and then includes its actual ASP.NET mark-up, an HTML preview for design-time rendering, and then ending tags. The ASP.NET mark-up is commented out, but SharePoint strips out the comment tags and uses this mark-up when the HTML file is synced to the .master or .aspx file. If you know ASP.NET, you can customize this mark-up in the snippet.

ü SPM:

SharePoint namespace registration SPM ("SharePoint markup") will be used for registering the SharePoint Namespaces and declaring SharePoint controls.

Example:

<!--SPM: %@Register Tagprefix="PageFieldSummaryLinkFieldControl"           Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"% -->

ü CS and CE:

The tag CS is for Comment Start and CE is for Comment End. These tags will be ignored from SharePoint Conversion engine and help you parse the lines of markup

Example:

<!--CS: Start Page Field: Title Snippet-->                 <!--CE: End Page Field: Title Snippet-->

ü MS and ME:

The tag MS is for Markup Start and ME is for Markup End. If you want to add a snippet to the page then you should use these tags, and you can use these tags for adding SharePoint controls as well. You can get these snippets from Snippet Gallery. These are used to identify lines of .NET markup.

<!--MS:<PageFieldTextField:TextField FieldName="fa564e0f-0c70-4ab9-b863-0177e6ddd247" runat="server">--> <!--ME:</PageFieldTextField:TextField>-->

ü  PS and PE:

Preview blocks PS and PE ("Preview start" and "preview end") surround a section of HTML code that you should not edit. These preview sections are a snapshot of the SharePoint control that snippet is inserting. A preview makes it possible for you to work more meaningfully on the HTML file in a client-side HTML editor. But, changing the content or styling within that preview has no lasting effect on the .master file, which is what SharePoint is ultimately using. To style a snippet, you have to identify and override the SharePoint styles with your own custom CSS. However, do not edit the preview code in the HTML file. It has no effect on the real page, and only serves to mislead people about what the control looks like.

<!--PS: Start of READ-ONLY PREVIEW (do not modify)--> <!--PE: End of READ-ONLY PREVIEW-->

So to add a custom control to your HTML master page, just wrap your Register tag in an <!–SPM comment, and pair it with the custom control wrapped in <!–MS and <!– ME comments: