This is a list of HTML elements I've found to be very poorly represented in most markup on the web today.   Many of these elements offer more semantic value than actual functionality, but with the rising popularity of CSS driven design where HTML elements are used for what they were actually intended for, I felt shining a little light on them was appropriate. 

  • <address>

    The <address> tag was intended to contain address, signature, and authorship information.  Phone and fax numbers, physical street addresses, email addresses, AIM/ICQ/Yahoo/etc, and any other online or offline contact data are all valid.  Typically  <address> elements are found at the top or bottom of a document.

    Usage:
    <address>
  My Company
  <br />
  1234 Somewhere Lane
  <br />
  Seattle, WA
  <br />
  Phone: (123) 456-7890
  <br />
  Fax: (123) 456-7890
</address>

    What's the point? I can do the same thing with a <div> tag
    Elements grouped with <div> have no semantic value unless they're assigned to a class or ID. Why create <div class="contact"> when there's already an element to do it for you?
    Example: 
    address {
  background: url(/images/bg_address.jpg) no-repeat bottom left;
  padding: 35px 0 35px 35px;
  font-style: normal;
}

<address>
<a href="https://moz.com/matt.php">Matt Inman</a>
<br />
SEOmoz.org LLC
<br />
4314 Roosevelt Way NE
<br />
Seattle, WA 98105
</address>


    Output:
    Matt Inman
    SEOmoz.org LLC
    4314 Roosevelt Way NE
    Seattle, WA 98105

     

  • <q>

    Note:  Apparently this little gem doesn't work in IE. Sorry folks.  W3C specs it, actual attempts prove otherwise.   A List Apart has an interesting article on how to make <q> work.

    Many web developers (myself included) have fallen into the practice of using character entities such as &quo; to quote text.   The <q> tag does this for us - it'll surround the enclosed text in quotes.

    Embedded Quotation
    One of the cool features of using the <q> tag is the behavior of embedded quotes.  If you enlose a <q> tag within another <q> tag it'll automatically switch quotation types. The default is outer <q> elements are surrounded in double quotes and inner <q> elements are surrounded in single quotes.  This is particularly useful if you're writing copy that involves heavy use of quotes within quotes, such as character dialogue.

    Example:
    <q>
      The internet, or <q>interweb</q>, is full of bitchin content</q>,
      said Matt,
      <q>If I were to surf the <q>interweb</q> I'd totally do it nekkid
    </q>

    Output:
     The internet, or interweb, is full of bitchin content, said Matt, If I were to surf the interweb I'd totally do it nekkid

    Styling your quoted content
    You can define the type of quotes that are rendered using the following CSS command: 
    q {
  quotes: "«" "»" "'" "'";
}
    The first two values specify the first level of quotation embedding, the next two values specify the second level of quote embedding.

    Using <q> instead of character entities also allows you to apply CSS styles to your quoted content such as color, font-style, font-weight, etc.

  • <optgroup>

    Ever had a bunch of <option> elements inside a <select> box that you wanted to group into categories but didn't want those categories to be select-able? <optgroup> does just that.

    Example:
    <select>
  <optgroup label="Mammals">
    <option value ="dogs">Dogs</option>
    <option value ="mrrow">Cats</option>
    <option value ="pigs">Pigs</option>
  </optgroup>
  <optgroup label="Reptiles">
    <option value ="lizards">Lizards</option>
    <option value ="geckos">Geckos</option>
    <option value ="iguanas">Iguanas</option>
  </optgroup>
</select>


    Output:
    Dogs Cats Pigs Lizards Geckos Iguanas

  • <acronym> or <abbr> combined with the title attribute

    The <acronym> and <abbr> tags define acronyms and abbreviations. In addition to offering semantic value, using these in combination with the title attribute will show the expanded version of the expression when you hover over the element. 

    Example:
    <acronym title="Search Engine Optimization">SEO</acronym>

    Output:
    SEO

  •  <fieldset> and <legend>

    <fieldset> is an excellent element to use when grouping items inside your form.  By default it'll draw a box around whatever elements it contains, combine it with <legend> to easily caption your form data.

    Styling the fieldset
    You can easily style your <fieldset>  using CSS:
    fieldset { 
  border-top: 1px solid #efefef;
  border-left: 1px solid #efefef;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 1em 1em 1em 1.5em;
} 

fieldset:hover {
  background: url(/images/bg_fieldset.gif) repeat-y;
  border: 1px solid #3A789D;
}
    Output:
    Personal Information Name Age:



Now that I'm done writing this entry I suppose I should get started on the task of putting these elements to use on the SEOmoz site itself. :)

On a similar note, check out Sarven Capadisli's excellent post on web standards about using your better judgement when it comes to adhering to the w3c.