In this post we are going to review a common XML validation error in SharePoint 2013’s new Design Manager when converting a HTML file to a Master Page, its cause and how to fix it.
SharePoint 2013 is now HTML5 friendly and with the addition of Design Manager and Design Manager’s ability to convert a general HTML page to a Master Page for us, creating a new look for SharePoint should be that much easier. After playing around with Design Manger, I decided to get serious and start a Branding project from scratch. Most of our projects now start with an existing framework of sorts as we know that frameworks can provide a quick way to get a project started right. One of the most simple frameworks we have used is HTML5 Boilerplate as it is outrageously simple yet provides a good structure to begin a site.
So after downloading a recent version of HTML5 Boilerplate I created a new site collection in one of my Cloudshare dev environments, copied over the branding assets (I still prefer SPD as the Design Mode was too limiting anyhow) and ended up with the following basic structure. Note I added the branding assets to a boilerplate sub-directory of the Master Page Gallery (~sitecollection/_catalogs/masterpage) as I like to keep branding initiatives separate for ease of management.
- Open up your site in a browser.
- Navigate to Design Manager (via the Settings menu or directly at ~sitecollection/_layouts/15/DesignWelcomePage.aspx)
- Click on Edit Master Page found in the left menu.
- On the Edit Master Pages page, click on “Convert an HTML file to a SharePoint master page”
- Navigate to the boilerplate sub directory and select boilerplate.html file. Click OK.
- You will be redirected to the Design Manager Edit Master Page page. Your Master Page is listed but it does not have a status, or you might receive a Warnings and Errors message.
Let’s figure out what is going on and how we can fix it. When we click on our Master Page in Design Manager, you might get a few different errors, one being:
SharePoint requires HTML files to be XML-compliant. Your file isn't XML-compliant, likely because of tag properties without quotes, missing closing tags, or invalid properties in tags.
There are multiple root elements. Line xxx, position xxx.
Run the file through an XML validator, fix any issues using your HTML editor, save the file, and refresh this preview.
Not the most helpful errors, but they point us in a direction of XML Validation, so let’s open our boilerplate.html in SharePoint Designer. Scroll all of the way to the bottom. Interesting new code as been added.
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
will not cut it.
So how do we fix this? Easy, replace the above code with
And don’t forget to remove the extra <head> section added to the bottom of the page. Your new boilerplate.html should look like: Save your page and return to the Edit Master Pages page in Design Manager. Refresh the page and you will see your Master Page has already been converted.
SharePoint 2013’s Design Manager requires strictly formatted XML when converting HTML pages to Master Pages. Comments around the <html> tag will cause issues even though most modern browsers have no problems interpreting common code found in HTML5 Boilerplate among other popular frameworks including Responsive frameworks. Replacing the IE conditional tagging with a simple <html> tag will likely fix your problems. I have tried adding the HTML5 Boilerplate <html> code back in after the conversion, and although it does stick in the .html file, if you then view the .master Master Page you will see that the <html> tag is actually replaced by ASP.NET SharePoint markup,
<SharePoint:SPHtmlTag class="no-js" runat="server" id="SPHtmlTag" dir="<%$Resources:wss,multipages_direction_dir_value%>">
So unless you are willing to break the association between the .html and .master files, thus negating Design Manager for managing your Master Page, you are stuck without the fancy IE conditional head tag. My suggestion, let’s move on from these browser wars and support modern browsers and let the older browsers wither away.
Have you found another solution to this problem? Please tell us.
See of all of my SharePoint 2013 Branding Tricks and Discoveries.