ROLE attributeThe next public working draft of XHTML2 will include a ROLE attribute. I read that on a public W3C mailing list when I was reading the discussion about my article on skip links and its follow-up. The new ROLE attribute allows you to ‘tag’ content of elements in a more specific way. An example might be this snippet of XHTML2:
<section role="search"> … </section>
As I am not so good at typing XForms out the top of my head (I should play with it more often) I left that part out but it should be pretty obvious. Note also that although not explicitly stated the above snippet is in the forthcoming XHTML2 namespace and the embedded XForms should be in the XForms namespace unless the evil namespace collaboration pack isn’t stopped in which case XForms inherits its namespace from the containing document.
Anyway, this ROLE gives you almost unlimited semantics as opposed to the CLASS attribute this element does define the content and is not merely a hint. I’m not sure how the attribute interacts with the XHTML Metainformation Attributes Module, but I guess we will find that out in the next draft. I know that it shares it semantics with REL and REV and probably is for common elements what REL and REV are for links.
The advantage of extending semantics through attribute values instead of through completely new elements is that new elements can change the structure of the document where attribute values merely redefine the semantics but not where the element may be placed.
Something for HTML5?
Regarding HTML5 - I wondered that very same thing.
Incidentally, Anne, your penchant for the web's future continues to astound me. Yours is the first comment form I've ever filled in that requested an IRI, rather than a URI or URL. Bravo!
HTML5 defines ways to add semantics to the CLASS attribute but it will also provide some basic elements. Like SECTION, HEADER, FOOTER, NAV, ASIDE, ARTICLE and other new elements. Perhaps eventually HTML5 will have something similar, but fixing the HTML mess should be priority in my opinion.
Simon, yeah, I started using the term right after it became an RFC, but I think we will never get rid of URL. (It is in CSS, for example.)
I think this is a MUCH better way to do it than the newly introduced elements in HTML 5 (as you just mentioned). Because of stuff like this, I’m not as much a fan of the WHATWG work anymore as I used to.
~Grauw
You need a set of basic elements. XHTML2 introduces those too. Please back up your statements a little better.
<sarcasm>You want role and class attributes? How about type, template, behavior, and group attributes too?</scarcasm>
Seriously it is NOT a good idea to use synonyms for element/attribute/variables that have different semanics. That is a well-known antipattern.
This is quite interesting. There are advantages and disadvantages to both the XHTML 2 role attribute and HTML 5 elements. For example, off the top of my head, some of the advantages and disadvantages could be:
role attribute advantages:role attribute disadvantages:That's not a complete list of advantages and disadvantages, nor entirely accurate, but it's a start. Perhaps the best solution could be a combination of both. eg. <article role="entry"> or <article role="comment">. I wonder if the WHATWG would consider introducing a role attribute too?
No DOM method to getElementsByRole(), or even a more generic getElementsByAttributeValue(attr, val).
Then make up your own. Extending the Document object isn't exactly rocket science - a Web developement guru should know that ;-) Example:
<html>
<head>
<title>Role Checker</title>
<script type="text/javascript">
if (Document && typeof document.getElementsByRole!="function")
{
Document.prototype.getElementsByRole=function()
{
var oElm, i=0, aRoles=[];
while (oElm = document.getElementsByTagName("*").item(i++))
{
if (oElm.getAttribute("role")==arguments[0]) aRoles.push(oElm);
}
return aRoles;
}
}
window.onload=function()
{
alert("There are " +document.getElementsByRole('main').length+ " role attributes valued 'main'.");
}
</script>
</head>
<body>
<h1 role="header">Role Checker</h1>
<p role="main">hello world</p>
<p role="main">check this out</p>
<hr>
<p role="footer">courtesy of jbot ;-)</p>
</body>
</html>
Of course, the above code will only work with Mozilla and not IE, as the latter does not support prototyping of the Document object. However, with a little rejigging it would work just fine in M$'s browser.