Anne van Kesteren

Defining importance by nesting elements

Joe Clark blogs about the markup used for the Technorati Tags. (Techorati: Tags.) I agree with him on the list part. Perhaps I would make it an ordered list, because it is sorted by alphabet. (The first part is sorted by alphabet, I am sure of that. However, I am not sure about the second part, since I do not speak those languages.) However, using an unordered list is probably ok as well, since it seems to be more about the importance of the individual “tags” which is not sorted.

I dislike the BIG element though. Isn’t there something else that might work better? Personally I tried to think of some CLASS attribute value but I couldn’t come up with a solution that works nice for inherited situations, like this one. (I thought of something like class="important weighting-4" or using nested class="important".) In the end you will probably end up with something similar to what Joe created. Perhaps not using BIG, but using SPAN elements. And then you could ask yourself if using nested SPAN elements and a CLASS attribute is an advantage over using nested BIG elements. I am sure of one thing: the STYLE attribute should be avoided.

There might be another alternative. If one of those tags really is more important than the other you could use nested EM elements which would save some bytes over using the BIG element.


  1. Hmm... I thought we had a tag with numbers in it, specifically to reflect the importance of each instance... H1...H6 is it?

    Posted by Dimitri Glazkov at

  2. Indeed, the big element isn't the solution, and neither is hx elements since those are not headings. This has all got to do with the weighting of individual words/phrases, and semantic class attributes combined with span, em and strong elements as appropriate is the only good solution to this unusual markup challenge IMHO.

    Posted by Charl van Niekerk at

  3. Yeah, Dimitri. That is also exactly the problem with those elements and that problem is being solved by XHTML 2.0 and HTML 5.0 if all goes well.

    Posted by Anne at

  4. Weighted lists are a form of graphing. They're visual, not structural. We can use the existing big and small elements, whether you personally believe they should even exist or not, to graft semantics onto this visual form. None of the proposed alternatives is better than mine, which is hardly optimal but is the least bad.

    Posted by Joe Clark at

  5. An ordered list would be the best way to go, but there should be something telling the user that the important items are at the top.

    Posted by The Wolf at

  6. What you are dealing here is attempting to express two dimensions of relationships (alphabetical + importance) for a set of items using one dimension (serialized presentation of content, aka markup). If we learned anything from the math classes in college, you can't express N dimensions using N-1 dimension without sacrificing some integrity and having to resort to "assumed" relationships, which are expressed by an additional semantical structure.

    In Joe's case this structure is using nested markup, in Anne's case, it's the class quantifiers, in my first comment, it's the headings.

    HTML/CSS doctrine itself does not provide a clear pattern on how to handle these situations, and thus the interpretations of the Bible begin, with all the semantic sophistry that always accompanies them.

    IMHO, as long as the actual style is not hard-coded into the markup, either one of these solutions is fine. We all basically believe in the same thing: markup should represent the structure of content.

    Posted by Dimitri Glazkov at