Uncommon HTML Tags

Aus Weis nix
Wechseln zu: Navigation, Suche

HTML elements that are very poorly represented in most markup on the web today but offer semantic value.

<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
       1234 Somewhere Lane
       Seattle, WA
       Phone: (123) 456-7890
       Fax: (123) 456-7890
     </address>

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>
     SEOmoz.org LLC
     4314 Roosevelt Way NE
     Seattle, WA 98105
     </address>

Surround the enclosed text in quotes.

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
     

Styling your quoted content using CSS:

     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.

<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>

<acronym> or

Use 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>

<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 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;
     }