Anne van Kesteren

XHTML2: ROLE attribute

The 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">

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.


  1. Something for HTML5?

    Posted by Mark Wubben at

  2. 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!

    Posted by Simon Jessey at

  3. 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.)

    Posted by Anne at

  4. 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.


    Posted by Laurens Holst at

  5. You need a set of basic elements. XHTML2 introduces those too. Please back up your statements a little better.

    Posted by Anne at

  6. <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.

    Posted by Jimmy Cerra at

  7. 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:
    • Allows the semantics to be applied to any element (assuming it will be part of the metadata attribute module, which can apply to any element in XHTML 2)
    • Easily extendable with a new profile.
    role attribute disadvantages:
    • Harder to work with. It's more difficult to work with a lot of the same elements in the source code that only differ by an attribute.
    • No DOM method to getElementsByRole(), or even a more generic getElementsByAttributeValue(attr, val).
    Element advantages:
    • Easier to work with source code, to associate end-tags with start-tags by the tag names.
    • DOM methods to getElementsByTagName() available.
    Element disadvantages:
    • Not so easily extendable. Would require new elements to be added in a new namespace.
    • To add new semantics, requires a new element to be added around existing elements, rather than just adding a simple attribute.

    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?

    Posted by Lachlan Hunt at

  8. No DOM method to getElementsByRole(), or even a more generic getElementsByAttributeValue(attr, val).

    Lachlan Hunt

    Then make up your own. Extending the Document object isn't exactly rocket science - a Web developement guru should know that ;-) Example:

     <title>Role Checker</title>
     <script type="text/javascript">
     if (Document && typeof document.getElementsByRole!="function")
       var oElm, i=0, aRoles=[];
       while (oElm = document.getElementsByTagName("*").item(i++))
        if (oElm.getAttribute("role")==arguments[0]) aRoles.push(oElm);
       return aRoles;
      alert("There are " +document.getElementsByRole('main').length+ " role attributes valued 'main'.");
     <h1 role="header">Role Checker</h1>
     <p role="main">hello world</p>
     <p role="main">check this out</p>
     <p role="footer">courtesy of jbot ;-)</p>

    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.

    Posted by jbot at