FIELDSET vs DIV

[csdude55]

I understand the purpose of a fieldset is to group similar items in a form. And by default it's a block element.

Is there any particular advantage to using a fieldset instead of a div, though? If they're styled the same by default, I'm not sure why I wouldn't just use a div... does Google look at them differently or something? Or screen readers?

Note that I'm using HTML5, and so the legend tag is optional for me. That's what kept me from using fieldset in the past.

[phranque]

the <fieldset> element should be used to improve the semantics of the form elements in your document and to improve accessibility for visitors.

Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify. It also makes it easier for people to focus on smaller and more manageable groups rather than try to grasp the entire form at once.

Grouping needs to be carried out visually and in the code, for example, by using the <fieldset> and <legend> elements to associate related form controls.

source: Web Accessibility Tutorials [w3.org]

Grouping controls is most important for related radio buttons and checkboxes.
...
Because they are multiple controls, it is particularly important that they be grouped semantically so they can be more easily treated as a single control. ...

It can also be useful to group other sets of controls that are not as tightly related as sets of radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address".

source: Techniques for WCAG 2.0 [w3.org]

[csdude55]

Well, in practice I discovered that a FIELDSET has built-in styling... placing a border around the whole thing, a margin-left and padding-left, and if you use a LEGEND then it positions the text of the legend vertically centered on top of the border:

[jsfiddle.net...]

So if you don't want that styling, you have to include:

fieldset { border: none; margin-left: 0; padding-left: 0 }

I guess the question, then, is whether there's any real difference between these that the user, browser, or search engine would see, other than (subjectively) making the code "more understandable"?

// Using a unique ID
<div id="named_element">
 <b>These are checkboxes</b><br>
 <br>

 <input type="checkbox" name="checkbox_1"> 1<br>
 <input type="checkbox" name="checkbox_2"> 2
</div>

// Using fieldset
<fieldset style="border: none; margin-left: 0; padding-left: 0">
 <legend><b>These are checkboxes</b></legend>
 <br>

 <input type="checkbox" name="checkbox_1"> 1<br>
 <input type="checkbox" name="checkbox_2"> 2
</fieldset>

I'm trying to write "better" code this time and not DIV everything, but it's a bit more text if it accomplishes the same thing with no actual advantage

[phranque]

Well, in practice I discovered that a FIELDSET has built-in styling... placing a border around the whole thing, a margin-left and padding-left, and if you use a LEGEND then it positions the text of the legend vertically centered on top of the border

from the "Techniques" resource i linked to above:

Authors sometimes avoid using the fieldset element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the "border" property of the fieldset and the "position" property of the legend.

[tangor]

There are semantic issues involved (think voice readers for the visually impaired).

fieldset exists for semantics.

Required? Not really. Useful? For the blind, most definitely.

Consider your audience and code accordingly.

[phranque]

the main purpose of a <fieldset> is to apply a <legend> element to a set of <form> elements.
this is crucial when using a linear (text-based) browser vs a visual browser in which the relationship among a set of form fields may be displayed (using borders, grouping, spacing, etc).

in other words, if you are reading a page that contains a <form> to someone, a <div> won't tell you that the contained form elements are for collecting address-related information.

[tangor]

The main reason is accessibility FIRST. A boxed set with one question for x options and one description for all conteined. Parsing hairs, but some hairs need splitting.