The <fieldset> + <legend> combination has a visual layout that isn't trivial to recreate with a regular <div>. I'd like to use this style for some normal content boxes on a site that I'm working on, but all of the documentation that I've found only mentions using <fieldset> within an html <form> to contain the inputs. Is it legal/valid to use it outside of this context, or should I just stylize some regular old divs and headings?

edit 1: s/headers/headings/

edit 2: I understand how to do this using divs and headings, but I'm asking why I wouldn't use a fieldset and legend when the code passes validation and the style is exactly what I'm looking for (on a related note, I think "legend" better describes my textual label than "heading"). Most tutorials seem to introduce a fieldset in the context of a form, but in practice, I've often seen this used without a form or inputs, and I haven't seen any official documentation that says that a form is a requirement.

A good answer would probably include a link to official W3C documentation (I couldn't find anything that decisively stated the context in which a fieldset should be used). Alternatively, if you know how a fieldset impacts accessibility or non-standard devices, that would be a good thing to know. Thanks!

1 answer

This was chosen as the best answer

Please don't use the 'incorrect' elements purely to get a visual effect.

A div with a border and a relatively positioned (or negative margined) h element with an opaque background will give you the same visual effect with much more meaning and perhaps more importantly, bonus points from the search engines for using headings within your page.


As a general rule of good behaviour and best practice we try to use elements in their intended way for semantic reasons.

You can use headings to make large text on a page, but you don't for the same reasons we stopped using tables for layout.

Fieldset and legend are clearly part of the form specification:

Using them outside of a form, purely for visual effect, would be akin to using textarea form control to get a border round a box on your page.

I hope you can see where I'm coming from.

Having said all that, there's plenty of support for using them outside of form elements (although not purely for visual effect)

My hard and fast stance of don't is clearly not supported by everyone, so maybe you need to let your conscience decide:

I wouldn't feel comfortable using a fieldset and legend for purely visual reasons, but it seems there's nothing stopping you, and having read that last article, I may just have a complete about face and start using fieldset and legend to group related content outside forms.


p.s. inferring a tone from written content is egocentric. My true intent is to be as helpful as possible with least effort on my part.

A couple of links to support that:

Answered over 8 years ago by Tony Crockford
  • Not planning on using the element if it is, in fact, incorrect -- thus the purpose of my question. Digging through W3C documentation, I can't find any mention of fieldset requiring a form parent, and I've often seen it used out of this context on other websites. Also, it passes validation (as xhtml 1.0 strict, xhtml 1.1, and html5) even if there's no form on the page. Still, your point about SEO might be worth considering. Michael Martin-Smucker over 8 years ago
  • (-1 for condescending tone and for answering a completely different question than the one that I asked.) Michael Martin-Smucker over 8 years ago
  • My answer was terse. The use of the fieldset is purely for visual effect - that is wrong. It may be valid, but it's still wrong and screen readers will find it very confusing. I'm not being condescending, just trying to be helpful. Your negative marking is unappreciated. Tony Crockford over 8 years ago
  • The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible. The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually. is what the spec says, so I think that confirms that fieldset is really only for grouping form controls Tony Crockford over 8 years ago
  • Tony Crockford over 8 years ago
  • "screen readers will find it very confusing." actually I have no evidence to support that, but I can neither edit nor delete a comment... Consider it erronous and ignore please. Tony Crockford over 8 years ago
  • I doubt negative markings are ever appreciated, but don't worry, I assumed I'd be reversing that decision from the beginning. :) I'm not sure how I missed the Stack Overflow question, since it matches mine almost word-for-word, but even there, there the subject seems to lack some clarity. (The "best answer" basically says, "It's okay because I did it and it looks good.") My main concern was with how, semantically, the use of a fieldset will be interpreted. On a browser, it doesn't seem to be much of an issue, but the problems are more likely to arise with technologies that I don't use regularly (like screenreaders and smartphones). I'm sorry I didn't make this concern more clear in my original question. The link to accessibilitytips is overwhelmingly helpful, and while these links won't be able to make my decision for me, they'll provide me with plenty of reading material on the subject. At this point, I can't imagine a more helpful answer than this one. Thanks! Michael Martin-Smucker over 8 years ago
  • Wow, apparently you can't do paragraphs in comments, and you also can't edit or delete them. Sorry about that massive chunk of text in the last comment... ;) Michael Martin-Smucker over 8 years ago
  • Thank you. Tony Crockford over 8 years ago