Styling the abbr Tag

December 19th, 2008

There are several ways that CSS can work along with SEO. Today, I’ll cover one quick option: styling the abbr tag.

Say, for instance, you have a link that states that your site is valid XHTML. Well, inside of the link use the abbr tag around the word XHTML. Inside of the abbr tag you use the title attribute to fill in what the word is an abbreviation for. When a search engine crawls your site, they not only come across your abbreviation, but also the value you’ve put in for the title. When hovered over, the title creates a tool-tip. By default the abbreviation will have a line below it. However, if you don’t want the line used, you would use this declaration in the CSS:

abbr{border:none;} 

(For simplicity sake, I’m using an inline style here. Because I have the abbr styled in my CSS, I had to override it by manually inserting what the browser does by default:)

Without the style:
Valid XHTML

With the style:
Valid XHTML

See the difference? It’s quick but handy. Alternatively, you could use a different border or another style if you wanted to.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • E-mail this story to a friend!
  • Technorati

No Comments

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.