Click here to Skip to main content
15,867,704 members
Articles / Web Development / XHTML

Five XHTML Elements You Didn't Know But Were Afraid to Ask

Rate me:
Please Sign up or sign in to vote.
4.62/5 (129 votes)
15 May 2006Ms-PL4 min read 253.2K   395   139   61
Exploring five useful XHTML/HTML elements that are important but not commonly used. Moreover, pointing to their relation with Internet Explorer, Firefox, and ASP.NET.

Introduction

With experience, working with ASP.NET, I noticed some important XHTML tags that are rarely used by web developers, even the experienced ones, so I thought of writing this article to promote them.

Most of the mentioned elements are HTML compatible, but all of them are XHTML compatible. I've tested these elements on Internet Explorer 6 and Firefox 1.5. Also, I've validated the demo project against XHTML 1.1 and XHTML 1.0 Transitional on the W3C Validator.

The elements are optgroup, label, fieldset/legend, col/colgroup and acronym. In this article, I point out the differences in displaying each of these elements between Internet Explorer and Firefox, moreover, I show their relation with ASP.NET. What follows is a quick introduction for each element:

1. optgroup

optgroup sample

HTML
<label for="county">County</label>
<select id="county">
    <optgroup label="England">
        <option>Surrey</option>
        <option>Kent</option>
    </optgroup>
    <optgroup label="Scotland">
        <option>Orkney</option>
    </optgroup>
</select>

<label for="languages">Languages</label>
<select size="6" multiple="multiple" id="languages">
    <optgroup label="Classical">
        <option>C#</option>
        <option>C++</option>
        <option>Java</option>
    </optgroup>
    <optgroup label="Web">
        <option>ASP.NET</option>
        <option>PHP</option>
    </optgroup>
</select>

The optgroup, which stands for Option Group, is an element that groups a set of option elements, inside a select element, and labels them. It is perfect for showing states and cities, countries and states, and other similar categorized items.

Unfortunately, this element is not generated by any ASP.NET server controls, however, I believe you can easily inherit from the DropDownList, ListBox, or the Item controls and make the necessary modifications to generate it.

2. label

label sample

HTML
<label for="FirstName">Full&nbsp;Name</label>
<input id="FirstName" type="text" />
Gender:&nbsp;
<label for="male">Male</label>
<input id="male" type="radio" name="gender" />
<label for="female">Female</label>
<input id="female" type="radio" name="gender" />

The label element provides a caption for a form element. Its main attribute is the "for" attribute which will point to the element that you want to provide a caption for.

In addition to providing a caption for the element, label will make selecting the associated element easier; so by clicking on the caption, you will be setting focus to the associated element, as if it is making the caption text a part of the associated element. In the provided demo, try clicking on the word "Full Name" and the text box next to it will be selected; also, when you click on the word "Male", the radio button will be selected.

ASP.NET generates this element for the Text property of the RadioButton and CheckBox server controls (and other controls as well). This explains the secret of setting focus to the control whenever clicking the text next to it. In ASP.NET 2.0, the Label server control has a new attribute AssociatedControlID that will render the control as an HTML label associated to the specified element versus rendering it as a span element.

3. fieldset/legend

fieldset sample

HTML
<fieldset>
    CP is a good place to publish XHTML related articles. 
</fieldset>

<fieldset>
    <legend>Personal Information</legend>
    <label for="FirstName">Full&nbsp;Name</label>
    <input id="FirstName" type="text" />
    Gender:&nbsp;
    <label for="male">Male</label>
    <input id="male" type="radio" name="gender" />
    <label for="female">Female</label>
    <input id="female" type="radio" name="gender" />
</fieldset>

The fieldset is an element that creates a frame, and legend is an optional element that creates a title for this frame.

In ASP.NET 2.0, there is a new attribute GroupingText for the Panel web control that will render it a legend and fieldset. However, ASP.NET 1.1 doesn't have any standard web control that could generate this element.

4. col/colgroup

optgroup sample

HTML
<table border="1">
    <colgroup>
        <col width="150px" />
        <col width="10px"  />
        <col width="220p" />
    </colgroup>
    <tr>
        <td valign="top">1</td>
        <td>&nbsp;</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>&nbsp;</td>
        <td>4</td>
    </tr>
</table>

The colgroup element is a table element. Its only child element is the col element. Each col element affects a column in the table. You can specify attributes that apply to all the columns in the colgroup element, and specific attributes for individual columns in the col element. You can also omit the colgroup element and keep the col elements.

The advantage of using the col element is that you only need to specify an attribute once rather than adding the same attribute across every td element in the column, and the result is less attributes and easier to manage code.

For cross-browser issues, use the width attribute only with the colgroup and col elements because I noticed that Firefox doesn't support all the attributes of the colgroup and col.

Sadly, the ASP.NET's Table and GridView server controls do not generate these elements.

5. acronym

acronym sample

HTML
<acronym title="Code Project">CP</acronym> is a good place to publish 
<acronym title="Extensible HyperText Markup Language">XHTML</acronym>
related articles.

The acronym element provides a definition for a term via the title attribute. By using this element, you are helping readers who are not familiar with the term, better optimizing your page for search engines and supporting accessibility.

By default, IE 6 doesn't show any sign on the text surrounded by this element; however, Firefox displays a dashed line under it. Both browsers display a tool tip of the full meaning whenever you stop your cursor over it.

If you like this element, have a look at the abbr (abbreviation) element which has a similar role.

Conclusion

I have spotted some elements that I thought need to have extra light on; however, there are more hidden elements to spot like th, tf, base, address, bdo, blockquote, code, dl, dt, dd, and dfn elements.

This article served as a quick reference for each element; for a full list of the attributes and usage, try the W3 Schools, htmldog.com, and you can always go back to the official documentation at the World Wide Web Consortium.

If you found the contents of this article useful, then please remember to vote.

History

  • 25th April, 2006 - First version
  • 10th May, 2006 - Second version
  • 13th May, 2006 - Third version

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
Architect
United Kingdom United Kingdom
Passionate about refining software practices, promoting self-motivated teams and orchestrating agile projects.
Lives in London, UK and works as a .NET architect consultant in the City.

Blog AdamTibi.net.

Comments and Discussions

 
GeneralMy vote of 5 Pin
gagan sawaliya9-Aug-12 1:53
gagan sawaliya9-Aug-12 1:53 
GeneralNice article Pin
Olivier_Giulieri18-Mar-10 7:06
Olivier_Giulieri18-Mar-10 7:06 
GeneralWow Pin
konikula21-Dec-09 13:41
konikula21-Dec-09 13:41 
RantFieldset Must always have a Legend Pin
Ugot2BkidNme8-Jun-09 6:54
Ugot2BkidNme8-Jun-09 6:54 
GeneralGood article!.. Pin
bgriffin_tpa26-Jul-07 4:51
bgriffin_tpa26-Jul-07 4:51 
GeneralRe: Good article!.. Pin
kevnord26-Jul-07 5:42
kevnord26-Jul-07 5:42 
GeneralRe: Good article!.. Pin
bgriffin_tpa26-Jul-07 7:25
bgriffin_tpa26-Jul-07 7:25 
GeneralRe: Good article!.. Pin
bgriffin_tpa26-Jul-07 11:45
bgriffin_tpa26-Jul-07 11:45 
GeneralOPTGROUP Pin
biggun17-Jul-07 8:38
biggun17-Jul-07 8:38 
Hi,

First of all, thanks for your good article, those tags are cool hidden stuff. I realize that recently, i spend some time on implemeting a function that generates the HTML code of a SELECT tag with indentation. Just what the OPTGROUP does...

Unfortunately, as of HTML 4.0, OPTGROUP tags can't be nested. You can't get something like this :
Categorie 1
Sub Categorie 1.1
Item 1
Item 2
Sub Categorie 1.2
Item 1
Categorie 2
Sub Categorie 2.1
....

By the way, with some non breakable spaces in the text of OPTION tag and CSS, you can mimic nested OPTGROUP.

Nice job.
Stephan
GeneralRe: OPTGROUP Pin
Adam Tibi17-Jul-07 23:28
professionalAdam Tibi17-Jul-07 23:28 
GeneralNice Article Pin
smsayami16-Jul-07 11:27
smsayami16-Jul-07 11:27 
GeneralGood One! Pin
Coder_200729-Oct-06 14:01
Coder_200729-Oct-06 14:01 
GeneralClarification re: label Pin
VBScab18-Sep-06 21:22
VBScab18-Sep-06 21:22 
GeneralRe: Clarification re: label Pin
Adam Tibi19-Sep-06 8:34
professionalAdam Tibi19-Sep-06 8:34 
GeneralYou missed Caption Pin
Chris Maunder23-May-06 15:52
cofounderChris Maunder23-May-06 15:52 
GeneralGreat Things But..... Pin
Sameers Javed21-May-06 13:07
Sameers Javed21-May-06 13:07 
GeneralRe: Great Things But..... Pin
Adam Tibi21-May-06 22:57
professionalAdam Tibi21-May-06 22:57 
GeneralRe: Great Things But..... Pin
xxrono7-May-07 10:10
xxrono7-May-07 10:10 
GeneralRe: Great Things But..... Pin
Adam Tibi7-May-07 22:44
professionalAdam Tibi7-May-07 22:44 
Generalfieldset rounded corners Pin
webber12345613-May-06 8:02
webber12345613-May-06 8:02 
GeneralRe: fieldset rounded corners Pin
Adam Tibi13-May-06 8:24
professionalAdam Tibi13-May-06 8:24 
GeneralRe: fieldset rounded corners Pin
webber12345613-May-06 9:40
webber12345613-May-06 9:40 
GeneralRe: fieldset rounded corners Pin
Jon Rista16-Jun-06 19:26
Jon Rista16-Jun-06 19:26 
GeneralRe: fieldset rounded corners Pin
xxrono8-May-07 1:25
xxrono8-May-07 1:25 
GeneralClarification acronym vs. abbr Pin
l0b010-May-06 22:38
l0b010-May-06 22:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.