In this post I will explain one common HTML element used in many websites. The element that I’m talking about is: FIELDSET linked closely with LEGEND. For a standard definition I will cite W3C.
The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose. The proper use of this element makes documents more accessible.
The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.
Sample content here
What is so cool about these tags?
From my point of view FIELDSET + LEGEND are one good pair. It is one of the best design oriented group of tags in HTML. The best part is that any content will fit well in this container. Let’s have some examples in order to see what is so special about these 2 tags.
1. Wrapper for Content
The first sample is my blog which is not updated: www.gongea.com. The blog was developed based on the FIELDSET + LEGEND. Every article is wrapped in a FIELDSET and the title is displayed from a LEGEND tag. Even the tag cloud and the blogroll are wrapped also in a FIELDSET.
2. Wrapper for Images
In this example the FIELDSET and LEGEND are combined with a picture. Let’s see what we can make from this composition.
As you can see I’ve added the copyright to this photo using the LEGEND tag. At the same time the FIELDSET is used to add the border around the picture to give it an effect similar to polaroid picture. I’ve used the same spacing, but in order to achieve a polaroid effect you will have to set a bigger value for the bottom padding.
3. Wrapper for Forms
For the forms this approach is the default one. This was the main purpose for FIELDSET and LEGEND. When you have labels and inputs that share a common goal or feature, you can wrap them in order to make your form elements more accessible.
The main idea with this article is that with creativity, simple and relatively dedicated HTML elements can be used in styling a website, or some elements from a website. I don’t know what do you think about FIELDSET and LEGEND, but I think there are great HTML tags for web designers. With the proper CSS code that will follow your design guidelines, these tags can be really helpful. Cheers!