W3C home > Mailing lists > Public > www-validator@w3.org > February 2010

Re: Custom attributes in HTML elements

From: Leif Halvard Silli <xn--mlform-iua@xn--mlform-iua.no>
Date: Fri, 12 Feb 2010 02:36:01 +0100
To: Claudia Murialdo <cmurialdo@gmail.com>
Cc: www-validator@w3.org
Message-ID: <20100212023601574684.093dc699@xn--mlform-iua.no>
Claudia Murialdo, Wed, 10 Feb 2010 12:26:32 -0200:

> I need to add a few custom attributes in some HTML elements, which is
> the best way to do it in order to keep validating with w3c validation
> service?.

Why? How do you want to use the attributes? Do you want to access them 
via CSS or via Javascript or?

> I want my page validates with HTML 4.01 Transitional. I read that one
> way is to extend de HTML 4.0 Transitional DTD and put this in the
> DOCTYPE declaration of the page (as it says in
> http://htmlhelp.com/tools/validator/customdtd.html), but I would like
> to know if I can do it in another way so that I can have the original
> and public w3c DTD in the DOCTYPE and add my customs attributes adding
> a new DTD or a namespace. Can I do that?.

HTML5 has the data-myattribute="myvalue" attribute.  However, I'll 
focus on HTML401 transitional. Her are 3 solutions, of which  option 2) 
is the only one which is interpreted as a "real" attribute.

1) Attribute inside class attribute approach. Has simple CSS 
   selector, when using the colon variant: p.myattr\:value{}

   a) <p class="  myattr=value   "> Lorem ipsum</p>
   b) <p class="  myattr='value' "> Lorem ipsum</p>
   c) <p class="  myattr:value   "> Lorem ipsum</p>

2) Take advantage of the "standard" misinterpretation of the HTML4
   Shorthand syntax. These attributes are interpreted as real
   attributes of the <p> element even if they, according to the, 
   the HTML4 validator, are just plain text inside the p element.
   As you can understand, this method has several syntactic 
   gotchas. But it seems reliable in at least these browsers: IE, 
   Opera, Firefox, Webkit and Lynx, Lobo ... Can be selected in
   CSS via a an attribute selector: 
   *[myattr]{} or *[myattr=value]{}.

   a) <p / myattr="value"  /> Lorem ipsum  
   b) <p / myattr="value" </> Lorem ipsum

3) Nested elements - the (new) design pattern of Microformats, if
   I have gotten it right. Has a simple CSS selector: 
   *.myattr > *.value {}

   <p class="myattr">
        <span class="value"> Lorem </span>
   </p>

Documentation: <http://målform.no/custom-html4-attributes/>
The page validates as HTML4.01 transitional.

Of course I expect that option 2) will be frowned upon. But it is 
valid. It is a hack, in the sense that it misuses a discrepancy between 
HTML4 and real world Web browsers - is is a clear signal that that 
HTML4 is ready to be updated.

Would be interesting what works for you.
-- 
leif halvard silli
Received on Friday, 12 February 2010 01:36:38 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 25 April 2012 12:14:39 GMT