The legend tag is solely for adding a visible label to a fieldset.
Browser support for the legend tag and the styling of the legend tag is patchy, but improving to the point where most modern browsers render the tag in a reasonably consistent way.
The most persistent problem is that legends may not wrap. So it’s a good idea to keep them short.
<fieldset> <legend>Personal Details</legend> </fieldset>
Attributes, such as id and class may be added for styling.
Legend should be the first nested element inside a fieldset.
<fieldset class="answer"> <legend>A radio array:</legend> <label for="q8a"><input type="radio" name="q8" id="q8a" value="Unique option 1" />Unique option 1</label> <label for="q8b"><input type="radio" name="q8" id="q8b" value="Unique option 2" />Unique option 2</label> <label for="q8c"><input type="radio" name="q8" id="q8c" value="Unique option 3" />Unique option 3</label> </fieldset>
Legends contain no fields, so there is nothing to validate, however, the validation script looks for a span of class required-flag nested within the required element (most logically, a fieldset). So, it makes good sense to nest this span inside the legend tag where screen readers will read it in a logical way.
<fieldset class="answer required"> <legend>A radio array <span class="required-flag">(required)</span>:</legend> ... </fieldset>