Re: Custom attributes in HTML elements

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 UTC