Understanding the Fieldset Tag

One of the most overlooked tags in HTML is the <fieldset> tag. If you have been reading these tutorials, you can see that I love the fieldset tag in HTML. There are a few reasons why the fieldset tag is so great. One of the reasons is that it creates a clear division of content. For example, in these tutorials, I provide examples, which means I need to show you that the example is different from the rest of the text. Using a fieldset, I create a box around some content. Another great reason is that I can label the content using an important identifier (the <legend> tag). You might notice in the tutorials that I use fieldsets with legends for examples and results so that you can easily see the difference between them.

I honestly have no idea why websites do not use HTML fieldsets as much as I do. For those users with visual impairments who need to use a screen reader, fieldsets provide the same benefit as the label element in a form tag. Also, I expect fieldsets to rise in popularity as they are so effective at classifying content. I suspect that fieldsets might contribute to the future of the semantic web as they can give additional context to the content inside the fieldset.

Fieldsets vs. Divs

Fieldsets are different from <div> tags, but they are more similar to tables without the table’s annoying static structure. Tables can have headings that allow users to understand what a particular row or column is describing. Well, the <legend> tag inside a fieldset is exactly like a table header. The legend tag contains the word "example" or "result" in my tutorials, which tells you what is in the block of code. How much more annoying would it have been if I just used a div without labeling any of the content with a legend or a heading tag? You probably would not know the difference between my examples and the results of those examples in action. I promise you that fieldsets are extremely useful in terms of usability and design.

Creating a Fieldset with a Legend

Let’s see how to create the HTML fieldset with a legend:

<fieldset>
  <legend>I add context to what is below me</legend>
  Oh, the irony of using a fieldset to show how to create a fieldset in HTML
</fieldset>

I must admit it is a little confusing for me to explain fieldsets to you using a fieldset, but I am certain that the fieldset structure will aid your learning process. Just like most other tags in HTML, the fieldset tag has an opening and closing tag. The fieldset tag is different in that it has an internal legend tag. As I said before, the legend tag tells the user about what is in the fieldset. After the legend, you can include any content you would like. I have also found these useful to use in forms for the very same reasons I listed at the top. Remember that your users are the most important thing about your website. Make it easy and organized for them to read. They will thank you for using fieldsets and legends.