Using fieldset to group non-form elements

Discussion in 'HTML' started by Ian, May 23, 2012.

  1. Ian

    Ian Guest

    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.
    Ian, May 23, 2012
    #1
    1. Advertising

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

    > [...] 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
    with <legend> markup inside it to set some text so that it covers part
    of the top border. It's a particularly common trick, but no rarity either.

    > 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)

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, May 24, 2012
    #2
    1. Advertising

  3. Ian

    Ian Guest

    On Thursday, May 24, 2012 4:45:26 AM UTC-4, Jukka K. Korpela wrote:
    > 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.
    Ian, May 24, 2012
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?SSBhbSBTYW0=?=

    <fieldset> tag

    =?Utf-8?B?SSBhbSBTYW0=?=, May 24, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    494
    =?Utf-8?B?SSBhbSBTYW0=?=
    May 24, 2005
  2. =?Utf-8?B?a3N0cml5aG9u?=

    Getting Drillthrough result from pivottable fieldset

    =?Utf-8?B?a3N0cml5aG9u?=, Jul 23, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    1,268
    =?Utf-8?B?a3N0cml5aG9u?=
    Jul 25, 2005
  3. RobM
    Replies:
    19
    Views:
    9,454
    brucie
    Nov 16, 2004
  4. luke

    <fieldset> & CSS

    luke, Mar 12, 2005, in forum: HTML
    Replies:
    2
    Views:
    1,448
    Disco Octopus
    Mar 14, 2005
  5. Bill Mccarthy
    Replies:
    7
    Views:
    108
    Gregory Brown
    Dec 4, 2009
Loading...

Share This Page