]> How to validate custom attributes of HTML elements in W3C validator? « MOleYArd (MOYA) blog

About

This blog mostly presents different approaches, methods and practices in software and web development, but also contains some "out of main topic" articles. MOYA (MOleYArd) products are presented here as well.

Follow

 


Valid XHTML 1.0 Transitional

«  
  »

How to validate custom attributes of HTML elements in W3C validator?

Sometimes you need to use (X)HTML element attributes that are not part of any W3C standard doctypes. Or you may want to use strict version of doctype with some attributes that are only in transitional version of doctype. Well, it certainly has its reasons (I will mention it) why they were removed and if you would like to use strict doctype then you shouldn’t use them.

Most of the time, you can follow this rule. In fact, you should use strict doctype instead of transitional doctype where possible. In strict versions of doctypes presentation attributes are removed and are expected to be replaced with CSS properties. I prefer strict doctypes. Apart from other things modern browsers use their most standards compliant rendering mode and therefore it is easier to make appearance of the site look exactly the same in various browsers. (commonly spaces between elements may be problematic)

But let me tell you a counterexample. It is the target attribute of the anchor (a) element. I agree that it’s a presentation matter. And CSS3 actually implements support for it (look at CSS3 hyperlinks draft). But support for this CSS3 property is still not sufficient enough. But what if we want to use strict doctype, while still using target attribute, not using any CSS3 (which not may be supported by visitors’ browsers) nor JavaScript (which may be disabled), but still want to pass W3C validation test?

Another example when we might need to use custom attributes is when we use AddThis service for sharing content on social networks. When you use this service you may want to specify custom sharing settings. To accomplish this, you need to add attributes like addthis:url or addthis:title.

They actually propose some solutions on their Help site to make it valid. One solution is adding a custom namespace:

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:addthis="http://www.addthis.com/help/api-spec">

As they mention, external custom namespaces are ignored by W3C validator. What you can do is to use inline extensions to your doctype definition (DTD). Here I will give an example that solves previously mentioned problems.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
  <!ATTLIST div addthis:url CDATA #IMPLIED>
  <!ATTLIST div addthis:title CDATA #IMPLIED>
  <!ATTLIST a target CDATA #IMPLIED>
]>

This is the solution, you will validate your page using these inline extensions. But it is just a partial solution because (as is also mentioned on AddThis Help site) most browsers render the trailing ]> in the page itself. I have tested it in several browsers (current versions) and out of them only Opera (update: this applied for Opera 11.5x, but not anymore for Opera 11.60) browser treated this correctly without rendering. AddThis Help does not offer any solution here… But luckily this is not so big problem and there is a solution. We just need some CSS to fix it:

html{color: transparent;}
div#wrapper{color: black;}

The whole trick is setting global font color transparent which will hide trailing ]> and then insert wrapper div in body tag (or possibly somewhere else) with font color we need. There is one more thing to mention for XHTML documents. Colon inside attributes has a special meaning, it denotes namespace prefix. In case of addthis:url and addthis:url it is namespace prefix addthis. Although external custom namespaces (their content) are ignored by W3C Validator, namespace prefixes still need to be included to pass validation (otherwise validator will state that a prefix for an attribute on an element is not defined), like this (look at line 3): 

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:addthis="http://www.addthis.com/help/api-spec">

Actually, because external content is ignored this

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:addthis="">

is actually enough. In case of HTML document colon (:) has actually no special meaning because the HTML syntax does not support namespace declarations. So you can simply stay with <html>.

So that’s it – the way to validate custom attributes of HTML elements in W3C validator.

November 17th, 2011 | Tags: , , , , , , , , , , , , , , | Category: Utilities, Web development

703 comments to How to validate custom attributes of HTML elements in W3C validator?

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>