After working on some forms today I ran across a section which required the user to select a referral. I was going to use several select (dropdown) lists and populate them with the people as required.Then I thought that there must be a simpler way and voila, the optgroup tag jumped to mind. Like this:

<select name=”Languages”>
 <optgroup label=”Internet”>
  <option label=”XHTML”>XHTML</option>
  <option label=”CSS”>CSS</option>
  <option label=”ASP”>ASP</option>
  <option label=”Perl”>Perl</option>
 </optgroup>
</select>

A very clean and simple way of separating the sections you can even make the dropdown list allow you multiple clicks across different optgroup sections (using the multiple=”multiple” attribute. How useful is that, eh? Yeah yeah I know, only for a developer/designer but still, much easier than several dropdown lists.

Finally one last link is the XHTML MP Tutorial, gathers it all in one place.