Categories Asides Semantic Weighted Lists Post author By Matt Post date January 23, 2005 10 Comments on Semantic Weighted Lists Joe Clark points out the bad markup in Technorati’s weighted tag list (I sometimes call them heat maps). Share this:Click to email this to a friend (Opens in new window)Click to share on Facebook (Opens in new window)Click to share on Twitter (Opens in new window) Related ← Kombi Journey → It’s Not RSS 10 replies on “Semantic Weighted Lists” And recommends bad markup to take its place. Joe Clark’s right about the list being an ordered one, but big and small tags? They don’t add anything semantically. Just classify the lis and be done with it. David, classifying the li’s and stopping there removes the whole point of the linked post. The point is that since the larger words are not necessarily emphasized (are they?), there should be a way to convey that they are ‘higher ranked’ without misusing <em> or <strong>. And hence <big> and <small> come in service. These are the edge cases in which semantics becomes meaningless. Unless you can decide exactly what making a word larger in the tag list is actually supposed to mean. Is it more important? Is it stressed? Is it stressed in the way that <em> stresses words in a sentence? Big and Small mean something that ‘List Item’ doesn’t. Matt’s title is somewhat misleading, because we’re trying to convey meaning without conveying semantics, at least the not semantics defined in HTML. Why does a blue whale seem more majestic than a school of tuna? It’s not more important, or more ’emphasized’, but there’s definitely something that’s triggering a sense of comparitive significance. It’s that sort of significance that a larger word in a weighted list conveys: big. (You can, I suppose, argue that a larger tag emphasized over the surrounding ones. Which leads me to wonder whether <em> should have a ‘rank’ attribute.) Firas: <Big> and <small> mean nothing semantically: they mean <font size="+1"> and <font size="-1">. That is no better than the current markup with inline styles on every link. You are right that classifying all the <li>s doesn’t convey the popularity rating. Really, I had written off even being able to convey that information with markup, but now I think you can if you use titles. <ol> <li class="pop-48" title="this is the 48th most popular tag">Bicycles</li> <li class="pop-2" title="This is the 2nd most popular tag">Cars</li> </ol> That solves everything. You’re saying that big and small aren’t semantic? That’s clearly untrue in the context of a visual graphing system like a weighted list. Joe Clark is right that the markup can be improved. But I came to a slightly different markup conclusion. See http://tantek.com/log/2005/02.html#d02t0800 for details. Isn’t this list ordered? The tags are in alphabetical order. I also wonder why the list is not ordered, but perhaps more disturbingly – suggest that the information conveyed in the weighted list by nested em tag solution is soupy at the expense of hiding a relevant piece of data (the popularity itself). I am not disputing the styled presentation but attempting html gymnastics in the name of semantics. I fail to see how these semantics (so many nests of ems) are of benefit to man or machine and turning off CSS reveals a list with equally emphasized items, the nesting does not reveal the relevant info. The only solution I see is to properly mark up a table with columns for tag and popularity ,semanticly linking the two pieces of data (and exposing the popularity to client side manipulation- the part that interests me) with the scope of each row. The rows and cells can be displayed inline to create the block of text effect and the weights/size controlled with classes and the display of the numeric value set to none(I would leave it in though and just make it less prominent). replaceable with with the <em> tag. So when Matt linked to Joe Clark’s post I chimed in with a rationale for using <big>, saying that it’s a […] dave: here’s a demo of what I think you meant. (I realize that a pingback already showed up, but just wanted to make clear that there’s a CSS example just not discussion.) Two comments. 1. It’s an alphabetically ordered list. I wish Clark would explain why his (“the best”) solution uses an unordered list. 2. Nested em tags!? If we can nest em tags, why do we have the strong tag? The spec: EM: indicates emphasis. STRONG: indicates stronger emphasis. Comments are closed.