There are high chances you have never had to use the fieldset or legend.
The fieldset tag is used to group related inputs and the legend tag is used to label the group.
You do get a bit of styling when you use the fieldset and legend tags, something similar to the example below. This creates some form of a grouping of input fields.
And that's pretty much all you get as far as visuals go, however, there is another use case for these tags. Not all your users benefit much from the looks of your page and some rely on screen readers to surf the web, for those users the structure of your HTML makes a lot of difference.
Accessiblity Reasons
Screen readers usually scan through HTML tags and their attributes to provide feedback to their users, which means making your site accessible goes beyond the way it looks.
For example
01: <fieldset>
02: <legend>Date of Birth</legend>
03:
04: <label for="DOB-Day">Day</label>
05: <input id="DOB-Month" type="number" min="1" max="31" placeholder="Day">
06:
07: <label for="DOB-Month-Year-Combo">Month-Year Combo</label>
08: <input id="DOB-Month-Year-Combo" type="month" placeholder="Month">
09: </fieldset>With the above example without the legend tag, the screen reader will only point out the two requested fields namely Day and Month-Year-Combo without knowing which date is being referred to. Is it the date when they last visited the clinic or when they last went on holiday?
With the legend tag in place, the reader or listener in this case can tell they are being prompted for their Date of Birth.
Applying further CSS styling
Another good use of these tags is to apply common styling across all grouped fields. By creating CSS stylings that target the fieldset and or legend tag you can apply universal styling.
This grouping tag not only helps you improve the visual organization of your page but also offers improved page usage to your non-visual users as well.
Here is another article you might like 😊 Remove .html From The End Of URLs | Netlify