Search code examples
htmlfieldsetsemantics

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


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?


Solution

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