Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • W3C : Validate green in XHTML strict with ASP.NET

    Posted on March 2nd, 2010 Thibaut 4 comments

    ASP.NET is a fantastic technology for website development. It’s being used by major companies and it has already proven itself over the years. However, I recently encountered some strangy things. If you ever wondered “is it possible to develop a XHTML strict website in ASP.NET ?”, then my answer is : “yes it is, but not that straightforward”. Let’s discuss about that :

     

    1. ASP.NET pages should have the strict DTD by default

    ASP.NET pages have the transitional DTD defined. They should have been strict, in my opinion.

    • Transitional is for projects using legacy code and allows you to write code the bad way. It was useful during the transition phase from HTML to XHTML but it’s over for a good time now
    • Standards compliant websites have usually lighter markup, thus faster to display and easier to maintain due to separation of concerns
    • It’s about to become illegal, in some cases, to develop websites which are not standard compliant. It’s already illegal for an organization to discriminate against disabled people and it’s pretty easy to argue that inaccessible Web sites are discriminatory – that’s what happened in the Sydney 2000 case
    • A lot of other things but it ain’t the point of this article

    Fix this and get strict

    When you create a new ASP.NET page (web form, master page, …), Visual Studio uses template files. You can change these ones to specify a strict DTD by default. They’re located in C:\Program Files\Microsoft Visual Studio\Web\WebNewFileItems\CSharp.

    Here’s what the section above the <head> tag of a WebForm template should look like :

    <%@ Page Language="C#" %><?xml version="1.0" encoding="UTF-8"?>

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

     

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

    • Notice that the <xml version=”…” > tag is placed next to the Page directive. If it’s placed below, the XHTML output code will start with a blank line and as the W3C validator expects it to be on the first line, you’ll get an error :  Unable to Determine Parse Mode!
    • Don’t forget to adapt the lang attribute of the <html> tag. It’s set to french in the example
    • I recommend you to modify the MasterPage template as well to get rid of the transitional doctype definitely

     

    2. Configure the ASP.NET engine to generate XHTML strict markup

    By default, ASP.NET generates markup which does not conform to XHTML strict. One of the most obvious examples is the <form> tag. It’s written like this in the .aspx :

    <form id="form1" runat="server">

    And is rendered like this :

    <form name="aspnetForm" method="post" action="accueil.aspx" id="aspnetForm">

    Try validating this (XHTML strict of course) and you’ll get :

    Pretty annoying ! Hopefully there’s an easy way to fix this. In the web.config file, specify the xhtmlConformance setting :

    <system.web>

      <xhtmlConformance mode="Strict" />

    And you’ll no longer see the name attribute in the <form> tag anymore if you look in the source code with your browser. Try validating again, and you’ll get :

    What the hell !? will you say… Here’s the explanation :

    The W3C validator uses a custom browser which is not recognized by ASP.NET. Thus, it will downgrade the rendering process (legacy mode), generating again the same invalid code. And as the DOCTYPE is not changed and remains to strict, you’ll get that same error again. The solution proposed by Microsoft is to create a browser definition for the W3C validator in the App_Browsers folder of your Web project. Put the lines below in a w3cvalidator.browser file and you’re done with this.

    <browsers>

      <browser id="w3cValidator" parentID="default">

        <identification>

          <userAgent match="^W3C_Validator" />

        </identification>

        <capture>

          <userAgent match="^W3C_Validator/(?’version’(?’major’\d+)(?’minor’\.\d+)\w*).*" />

        </capture>

        <capabilities>

          <capability name="browser" value="w3cValidator" />

          <capability name="majorversion" value="${major}" />

          <capability name="minorversion" value="${minor}" />

          <capability name="version" value="${version}" />

          <capability name="w3cdomversion" value="1.0" />

          <capability name="xml" value="true" />

          <capability name="tagWriter" value="System.Web.UI.HtmlTextWriter" />

        </capabilities>

      </browser>

    </browsers>

     

    3. Learn to deal with ampersands

    In the text of your website, you’ll most probably use ampersands sometimes (&). You know that you shouldn’t type them as is, but rather as &amp;. Easy to do in regular files, but can cause problems sometimes. I recently encountered a “special” case when using master pages : the title is written in the title attribute of the @Page directive…

    <%@ Page Title="Title with an ampersand &amp;"

    …and ASP.NET automatically converts the &amp; to & in the <title> tag of the generated output ! And here’s the result :

    You could use &amp;amp; in this case to overcome the problem. But you’ll agree that it’s not convenient at all and error-prone. Maybe there is a “official” solution to this problem, but here’s my humble trick anyway :

    In the Page_Load event of the MasterPage, encode the content of the <title> tag.

    protected void Page_Load(object sender, EventArgs e)

    {

        this.Page.Title = Server.HtmlEncode(this.Page.Title);

    }

     

    4. Go green

    This is where the article ends. This is a vast subject and if you want to go deeper in this, check out the following MSDN article : Building ASP.NET 2.0 Web Sites Using Web Standards. But for now, with the stuff we’ve just discussed here, this should be enough for you to get :

    See you ;)

    Share/Save/Bookmark