Fieldsets

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. So, I provide examples in these tutorials, which means I need to show you that the example is different than 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 some important identifier (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 that 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 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. Let’s see how to create the HTML fieldset with a legend:

Example
<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 also have 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.

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Comment

  1. This page should show what the code generates. But it was straightforward from trying it out in the code simulator.

  2. Fieldsets are meant to be used to group related form tags, and not be used outside of a form. The newer html 5 "article" and "section" tags should be used to logically organize content on a page.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.