5 HTML Elements You Probably Never Use (But Perhaps Should)

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. 

• The

  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 

  elements are found at the top or bottom of a document.

  Usage:

  
    My Company
    
  
    1234 Somewhere Lane
    
  
    Seattle, WA
    
  
    Phone: (123) 456-7890
    
  
    Fax: (123) 456-7890
  
  
  

  What’s the point? I can do the same thing with a

  tag
  Elements grouped with

  have no semantic value unless they’re assigned to a class or ID. Why create

  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;
  }
  
  
  Matt Inman
  
  
  SEOmoz.org LLC
  
  
  4314 Roosevelt Way NE
  
  
  Seattle, WA 98105
  

  Output:

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

  Table of Contents

  Toggle

   

• 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 work.

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

  Embedded Quotation
  One of the cool features of using the tag is the behavior of embedded quotes.  If you enlose a tag within another tag it’ll automatically switch quotation types. The default is outer elements are surrounded in double quotes and inner 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:
  
    The internet, or interweb, is full of bitchin content,
    said Matt,
    If I were to surf the interweb I’d totally do it nekkid
  

  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 instead of character entities also allows you to apply CSS styles to your quoted content such as color, font-style, font-weight, etc.

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

  Example:

  Dogs Cats Pigs Lizards Geckos Iguanas

  Output:
  Dogs Cats Pigs Lizards Geckos Iguanas

• or combined with the title attribute

  The and 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:
  SEO

  Output:
  SEO

•  

  and

  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

  to easily caption your form data.
  
  Styling the fieldset
  You can easily style your

    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.