HTML5, W3C Validation and Semantics (out-of-the-box?)

Topics: Core
Oct 19, 2013 at 6:15 PM
Not entirely out of boredom I subjected a few of my Orchard sites to the w3c validator. The results were very encouraging but not entirely without errors.

Now the title of this discussion can easily trigger an infinite discussion about whether validation is important or not, personally I believe in validate and then on a case-by-case basis determine if the errors are worth fixing. In addition, I find it helps me to better understand the intented use of (new-) html5 elements.

Of course, Orchard will let me override everything so it is no big deal to swap an aside for an article or a footer for a legend.

I have seen similar discussions for other CMS's and the general mood seems at least try to validate succesfully out of the box. What would this mean for Orchard? I suppose it means that the default structure, as well as the default theme should validate for each new release. Not sure if this is part of the release cycle currently?

An example down below. This overrides Widget.Wrapper.cshtml to ommit the header element if there is only a h1 title (maybe widgets should use h2 by default?) and not a composite header. This has the added side-effect of stripping the header element inside any widgets placed in the footer element declared in Document.cshtml, which caused most of the validation errors (header element must not be placed inside footer element).

Another tip is to not use SetMeta for including e.g. X-UA-Compatible, but instead add this as a http header on the response for all non-standard meta http-equiv tags.

These two minor changes are a good start to validate 100%... good luck though everyone with your facebook like buttons, missing alt's and frameborders on iframes ;)

Now this leaves the question of semantics. By their nature subject to interpretation and I am not an expert by far, but are we doing the right thing with our aside's, article's etc. out of the box? I hope to get some inspirational responses.

Override Widget.Wrapper.cshtml

@using Orchard.ContentManagement;
@using Orchard.Widgets.Models;
@{
    var widgetPart = ((IContent)Model.ContentItem).As<WidgetPart>();
    var tag = Tag(Model, "article");
}
@tag.StartElement
    @if (Model.Header == null && widgetPart.RenderTitle && HasText(widgetPart.Title)) {
        <h1>@widgetPart.Title</h1>
    }
    else {
        <header>
            @if (widgetPart.RenderTitle && HasText(widgetPart.Title)) {
            <h1>@widgetPart.Title</h1>
            }
            @Display(Model.Header)
        </header>
    }
    @Display(Model.Child)
    @if(Model.Footer != null) {
    <footer>
        @Display(Model.Footer)
    </footer>
    }
@tag.EndElement
Coordinator
Oct 26, 2013 at 9:02 AM
A pull request would be nice. It's rare that the theme machine is used without modifications, but being valid out of the box would certainly be better.