Legend Element Annoyances
.In Exploring HTML form elements, I wrote about semantic elements that improve form markup and usability. Sadly, the legend element has some significant problems.
legend is used within fieldset elements to act as a caption for the set of inputs encapsulated by the fieldset element. Since such captions are often necessary, it’s quite useful to have an element with that semantic link established by default.
However, as I mentioned in my overview of the form elements, there are significant CSS problems with the legend element, and I’m now wondering if it’s viable. The whole point of sematnic markup is that it shouldn’t affect display—the two should be separate. Using semantic elements or using div elements for absoluately everything—it shouldn’t make a difference to how the page appears after it’s been styled with CSS.
For most of the rest of the elements in HTML and XHTML, this is true. You can alter their appearance as you wish, making a elements look just like other text, making div elements display inline, making b italicize text, and so on.
This is how it is supposed to work. And this was my assumption about how it would work with legend. But I was sadly mistaken, and the workarounds are proving too awkward.
There’s a bug logged against it in Firefox, but it doesn’t look like there’s going to be much progress. IE has its own rendering quirks, such as making it difficult to remove the left margin. So not only are workarounds necessary, different workarounds are necessary for different browsers, really a nightmare scenario for web developers.
The first problem I ran into was that without introducting other elements inside the legend, it appears to be completely impossible to get the text inside it to wrap. It’ll just keep going and going. Apparently there are significant problems with positioning in the element absolutely, too.
Personally speaking, I don’t see that much need for styling form elements—but designers do, and to be fair they have a point. Why shouldn’t the form look consistent? And in real-world scenarios, the styling demands will usually trump the drive for semantic markup.
This leaves me in the unpleasant position of removing legend from the specification for forms that I’m writing, because it’s just too awkward. I’m not sure it’s right to blame the browser makers, but I’m not happy with how the situation has ended up.
Incidentally, one of the contributing factors to Firefox acting the way it does now is apparently that the default rendering of legend can’t be done in CSS, and also that there’s significant demand from designers/developers that it render that way without stying—and I am deeply unimpressed with whoever those people are. But ultimately it looks like whoever mandated that rendering in the first place is really at fault here, due to lack of foresight.
So, the upshot is: unless you have very light styling requirements, avoid the legend tag. I’m using span in its place, which is hardly semantically rich. A header would be another option on a case-by-case basis, but my current requirement is for consistency, so span it is.
02 Jun 2007 at 20:49
I’m working on a project right now that has put me in the exact same predicament… fight a fight i can’t win to style the legend element in some kind of satisfactory way or scrap the legend element and just drop an element above my fieldset. I feel dirty doing it, but I think I’m going to have to go with the latter. You sum it up quite succinctly when you say “in real-world scenarios, the styling demands will usually trump the drive for semantic markup.”. It’s true in my case, your case and I’m sure countless others. Let’s hope the W3C and the browser vendors can get a bit better grip on this one in the future. Out of curiosity, do you know if IE7 is still making the legend element as difficult to style as IE6 or has the situation improved any?
05 Jul 2007 at 12:39
Brad: I haven’t tested IE7 with the legend element yet, but I don’t think it’d make that much difference to me—the problem is inconsistent styling across the browsers, so even if IE7 is better, it’ll be years before it really helps, and even then only if FF and the others follow the same path. I’m hoping that the groups pushing HTML5 address the problem, but haven’t checked up on that yet.