Does the use of the fieldset HTML tag have meaning beyond grouping forms?

Question

Usually, I've seen it with forms, but I've found it helpful to group related sets of data (eg when you have multiple tables on a page, using a fieldset around each table or group of related tables to define a visible meaning and a group name (legend)). Is this abusing the fieldset tag to the point where, in my uses, it no longer has semantic meaning?

Answer 1

The fieldset tag is also of use to screen readers and some other assistive technologies.

Answer 2

I believe this would be abuse. http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10 states "The FIELDSET element allows authors to group thematically related controls and labels".

Answer 3

fieldset is about form control group. By grouping related form controls, authors can divide a form into smaller, more manageable parts, improving the usability disaster that can strike when confronting users with too many form controls.

That does not means a fieldset always group fields within a form, even though the specification discuss fieldset only within the context of user interacting with form...

So the "abuse" can come from the fact the HTML 4 and XHTML specs do not require fieldset and legend to be contained within form elements. FIELDSET can even be the child of the BODY element. It's valid syntax to put fieldsets outside forms.

But, when you describe something as a fieldset that isn't really a fieldset, you just cause confusion.

It's best to think of HTML / XHTML tags as describing the meaning of an element rather than how it will look. Then you can use CSS to make the element look like whatever you want.

If you group data for presentation purpose, you can find here a nice CSS alternative.

For reference:

.fieldset {
border-right: 1px solid #75736E;
border-bottom: 1px solid #75736E;
border-left: 1px solid #F2F0EE;
border-top: 1px solid #F2F0EE;
padding: 10px 3px 3px 3px;

}

.outer {
border-left: 1px solid #75736E;
border-top: 1px solid #75736E;
border-right: 1px solid #F2F0EE;
border-bottom: 1px solid #F2F0EE;
width: 200px; /* CHANGE THIS FOR BOX SIZE */
} 

.legend {
float: left;
margin-left: 15px;
margin-top: -8px;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
background: #FFF;
} 

<div class="legend">Lipsum.com Is The Best</div>
<div class="outer">
<div class="fieldset">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Donec congue fermentum metus. Quisque vel ante. 
Cras purus metus, dignissim at, luctus et, sollicitudin eget, urna. 
Maecenas eget lacus. Aenean bibendum risus non erat mattis semper. 
Aliquam placerat nibh eget lacus. Sed blandit eleifend justo. Nam elit. 
Fusce feugiat orci id eros facilisis laoreet. 
Integer vestibulum condimentum purus. 
Proin vehicula congue lacus. Quisque placerat diam nec enim. 
Nunc lorem. Maecenas nec sem sed nulla tristique faucibus.</div></div>

Answer 4

If you want to group tables, consider using an appropriate heading (h1-h6) element for each group. Individual tables can be described using the 'caption' element. The 'summary' attribute is also available for each table.

From the spec:

Each table may have an associated caption (see the CAPTION element) that provides a short description of the table's purpose. A longer description may also be provided (via the summary attribute) for the benefit of people using speech or Braille-based user agents.

And for the record, the 'fieldset' element is not intended to be use outside of forms. And within forms, it is intended to conceptually group like input fields - things like 'personal information' or 'billing address', etc.

Here's an interesting article that discusses what screen-reader users hear when navigating fieldsets. http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibility-fieldset-legends/

Answer 5

The "field" bit in the name fieldset refers to <form> fields.

Using fieldset outside forms to group aribtrary data is clearly semantic misuse.

However, your HTML will validate and God will not Kill a Kitten.

Answer 6

I can see semantic advantages to blocking content into fieldsets with legends.

Although the W3C associated the use of fieldsets and legends with forms, allowing the use outside the form tag opens up new boundaries to experimentation. Potentially similar to definition list in use.

I personally do not think that the "field" in fieldset is specific to form field. It just inherited relationship from it's use within the form tag. field is in reference to the grouping.

Imagine going to your local parks and recreation to play softball with your friends. There are 3 available fields. All of them are have signs on the fence "BASEBALL ONLY"

Do you pack up your gear and go home?

labeling the use of fieldsets and legends outside the form tag abuse is narrow sighted.

No where in the definition does it mention forms:

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.

I consider xhtml tags formatting control. div p blockquote etc.

<h1>The Big Book about Everything</h1>
<fieldset><legend>Jokes</legend>
<h2>30 pages of humorous Jokes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset><legend>Poems</legend>
<h2>20 pages of well written poems</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset><legend>Horror</legend>
<h2>3 Short and scary stories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset><legend>Mystery</legend>
<h2>3 Short and mysterious stories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>

Regards, William