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.
<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="http://www.seomoz.org/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>
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:
<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.
<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:
