Valid for Sitecore 5.3.1, 5.3

Sitecore based XHTML-compliant site

It is possible to develop a Sitecore based XHTML-compliant site. This article describes the steps required to make the site comply with XHTML specification.

You can use either the Layout Studio or a third-party editor to edit the layout’s source code.

1. DOCTYPE directive

Modify layout’s DOCTYPE directive to identify the schema you would like to use.

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2. Add XML declaration

Actually, an XML declaration is not required in all XHTML documents; however, XHTML document authors are strongly encouraged to use XML declarations in all their documents.

<?xml version="1.0" encoding="UTF-8"?>

3. Add “xmlns”, “xml:lang” and “lang” attributes to <html> element

4. Tags in <head> section

Make sure that all meta tags in <head/> section have closing tags.

Here is the complete code of a simple XHTML 1.0 Transitional - compliant layout:

 1 <%@ Page language="c#" Inherits="Sitecore.BasePage" Codepage="65001" %>
 2 <%@ register TagPrefix="sc" Namespace="Sitecore.WebControls" Assembly="Sitecore.WebControls" %>
 3 <%@ OutputCache Location="None" VaryByParam="none" %>
 4 
 5 <?xml version="1.0" encoding="UTF-8"?>
 6 
 7 <!DOCTYPE html
 8      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 9      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
10 
11 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
12   <head>
13     <title>Welcome To SiteCore</title>
14     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
15     <meta name="CODE_LANGUAGE" content="C#"/>
16     <meta name="vs_defaultClientScript" content="JavaScript"/>
17     <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"/>
18     <link href='/default.css' rel='stylesheet'/>
19   </head>
20   <body>
21       <form method="post" runat="server" id="mainform">
22       <sc:xslfile id=Xsl_document runat="server" renderingid="{86353948-8063-4942-AA4F-D3E00571A38E}" cacheable="true" path="/xsl/Xsl document.xslt">
23       </sc:xslfile>
24       <sc:placeholder id=PlaceHolder runat="server" key="content"></sc:placeholder>
25     </form>
26   </body>
27 </html>

5. Change the output method for all XSLT renderings to “xml”

Change the output method for all XSLT renderings to “xml”:

<xsl:output method="xml" indent="no" encoding="UTF-8" />

In order to avoid xml declaration, you should add the omit-xml-declaration="yes" attribute to the <xsl:output> tag in your xslt rendering (as shown below):

<xsl:output method="xml" indent="no" encoding="UTF-8" omit-xml-declaration="yes" />

6. Make sure the site’s content is XHTML compliant

Make sure that output-xhtml parameter in tidy configuration file is set to true (it is true by default). The configuration file is located in /sitecore/client/misc folder and is named tidy.cfg

output-xhtml: yes

The Tidy on save option should be turned on. In order to make sure, navigate to the /sitecore/system/Settings/HTMLEditor/Tidy item using the Content Editor and verify that the Tidy on save checkbox is checked.

Please check that the setting for the Tidy processor in the Processors/SaveUI section of web.config is in on mode as follows.
<processor mode="on" type="Sitecore.Pipelines.Save.HtmlTidy, Sitecore.Kernel" />

Important note: Tag names and attributes must be in lowercase.

7. Using Layout Studio to edit the source code

You can use Layout Studio to perform the operations described in this article.

The source code of a layout can be accessed in the following way:

Start the Layout Studio (Sitecore » Layout Studio);
Open a layout (File » Open » Layout)
Click the View page source button on the toolbar:

You will be able to edit the source code:

8. Spellcheck in RTE

You may encounter the SpellingForm is null or not an object javascript error message when trying to spellcheck in the Rich Text Editor.

This is caused by the Strict value of the xhtmlConformance mode in your web.config.

This element makes some changes in the html on the website in order to satisfy the xhtml strict doctype. Information about the xhtml strict doctype can be found via the following link:

http://msdn2.microsoft.com/en-us/library/ms178159.html

When this entry is added to the web.config file, it makes minor adjustments to the generated html. The name attribute is illegal in the strict mode, so it is removed from the form element of the SpellCheck.html. In the /sitecore/shell/Editor/Spell.js file this name is used to reference the element. This fails because the name is missing.

To solve this problem, update the Spell.js file with the following code:

if(loadText())

document.SpellingForm.submit();

change to:

if(loadText())

{

var spellingForm = document.getElementById("SpellingForm");

spellingForm.submit();

}

Note: Make sure that you have cleaned the browser cache to use the updated script file for a spellcheck.