Using fieldset to group non-form elements

Ian · May 23, 2012

This may come across as an odd question, as I've already been doing this, and plan on still doing it. I guess what I want to know is, what is the exact reason to avoid using this trick? I assume it has to do with semantics, but is a screen reader, for instance, going to get confused when it comes across a fieldset that isn't inside a form element, or will it just render itand move on?

Here is an example:

<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<fieldset>
<legend>Test</legend>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Globben</li>
<li>Globen</li>
</ul>
</fieldset>
</body>
</html>

This validates as HTML5, even though I didn't include a character encoding.

I bring this up because either alt.html or CIWAH was where I was told not to use this trick, many moons ago, but I don't really know why. I realize that fieldset is not designed for use outside forms, but it works beautifully..

Hope someone out there has some thoughts on this. Hope all are well.

Jukka K. Korpela · May 24, 2012

[...] what is the exact reason to avoid using this trick?

It seems that you are referring to the use of <fieldset> markup to
create a border of a special kind around some content, possibly together

I assume it has to do with semantics, but is a screen reader,
for instance, going to get confused when it comes across a fieldset
that isn't inside a form element, or will it just render it and move on?

By the specifications, <fieldset>, as the name suggests, "allows authors
to group thematically related controls and labels". I guess this could
be counted as a semantic rule. It has not been enforced in any way in
the syntax: <fieldset> may appear outside forms, and it need not contain
anything specific, such as controls or labels.

The potential confusion that you mention - which is a matter of a
confused *user* rather than confused software - is worth considering,
but it is difficult to find consistent and reliable information on this.
For example, the page
http://www.paciellogroup.com/blog/2007/11/fieldsets-legends-and-screen-readers/
is informative well-written but rather old.

Instead of going to the details, we can say at the general level that
screen readers can make use of <fieldset> and <legend> markup when used
for form fields, and this may cause confusion if they are used for
grouping other things. Probably nothing catastrophic, though.

So for reasons of potential user confusion, the trick is best avoided.
There is also the potential confusion of sighted users. Since certain
types of borders and texts over them are relatively often used to group
form fields, and much less often for other things, the use may expect
that some form fields are involved. He might even wonder whether the
fields are missing due to some bug (such things happen).

The trick never had great popularity, though I've seen it used (and used
it myself when maintaining I site that uses it in certain context). Its
use has probably decreased because nowadays you can draw borders with
CSS rather well, though rounded borders are still a challenge to some
old browsers.

<fieldset>
<legend>Test</legend>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Globben</li>
<li>Globen</li>
</ul>
</fieldset> [...]
This validates as HTML5, even though I didn't include a character encoding.

HTML5 drafts say that "the fieldset element represents a set of form
controls optionally grouped under a common name", but they don't turn
this into a requirement.

I would not recommend using the trick, but neither do I recommend
spending time in just fixing it. If it works, don't fix it. But when you
have a reason to rewrite the page or a relevant part thereof, use just
<div> with style. Be prepared to spending some time with CSS to make the
"legend" positioned as when using <fieldset>, if that's what you want (a
little positioning and margins or padding should do that)

Ian · May 24, 2012

2012-05-23 2:55, Ian wrote:

It's [not?] a particularly common trick, but no rarity either.

I do have a tendency to invent things that have already been invented. I suppose my other trick of setting image widths to 100% is also not a rarity.

I would not recommend using the trick, but neither do I recommend
spending time in just fixing it. If it works, don't fix it.

I appreciate the response, Jukka. There seems to be a fine line between stretching HTML, and writing invalid code. I just want to stay on the right side of that line. Hope you're well.

Not sure why drop-down is not working.	2	Mar 24, 2024
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Mandatory Elements To Conduct JavaScript Form Manipulation	7	Aug 22, 2023
Check forms With JavaScript	1	Mar 28, 2023
Song requests	4	Aug 16, 2023
JavaScript code not working!!	6	Jun 13, 2023
I need help fixing my website	2	Oct 15, 2023
Need help with code on website (noob)	2	Jul 18, 2022

Using fieldset to group non-form elements

Ian

Jukka K. Korpela

Ian

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads