Saturday, February 14, 2009

5 obscure HTML tags that you should know and even use

With the rising popularity of CSS for styling, many web developers and users alike have become alienated from the good old HTML tags. Only a handful of these tags are used in the markup of web pages today. Most of them have got limited representation and some of them are entirely forgotten. I decided to round up a couple of HTML tags that perhaps should be used a little more often than they actually are.

1. <abbr> or <acronym>

The <abbr> and <acronym> tag describes abbreviations and acronyms. By marking up abbreviations you can give useful information to your visitors by showing tooltips when they hover the mouse over the element.

Usage:

<abbr title="HyperText Markup Language">HTML</abbr>

This is the result. Hover your mouse above the following text.

HTML

2. <q>

The <q> tag defines a short quotation. It tells the browser to insert quotation marks around the marked element.

Most developers are used to the &quot; entity whenever they need to insert quotations, and all blogging editor automatically converts all typed quotations (“) into this entity. But the <q> tag is a better option. Why? Because it allows you to apply styles to your quotations through CSS. Bad news: this tag is not supported by Internet Explorer, but perhaps will be in version 8.

Usage

<q>The quick brown fox jumps over the lazy dog</q>

Result:

The quick brown fox jumps over the lazy dog

The <q> tag is commonly associated with the <blockquote> tag. The former is used to handle short inline quotes and the later for larger paragraphs.

3. <wbr>

<wbr> tag is the most obscure of all HTML tags (w3schools.com does not even have reference to this tag). The <wbr> means word break and according to Peter-Paul Koch, it tells the browser that it “may insert a line break here, if it wishes."  If the browser does not think a line break is necessary nothing happens.

The <wbr> works like word wrap – it wraps the text only when necessary, thereby preventing the page from breaking because of the presence of  exceptionally long lines of text.

Unfortunately, <wbr> tag works only with IE and Firefox.  Opera and Safari have no support.

Example Usage:

text<wbr/>text<wbr/>text<wbr/>text<wbr/>text<wbr/>

The following text will look contiguous in Opera and Safari, but if viewed in IE or Firefox will break off at appropriate places. [Update: It's working on Safari 4]

LoremipsumdolorsitametconsectetueradipiscingelitseddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpatUtwisienimadminimveniamquisnostrudexercitation

4.  <fieldset> and <legend>

The <fieldset> tag draws a box around the elements while the <legend> tag draws a box as well as add a caption to the fieldset element. These tags are useful to group items inside forms.

Example:

<fieldset>
    <legend>Form</legend> 
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
  </fieldset>

Result:

Form

Name:
Email:

 

5. <bdo>

The <bdo> stands bidirectional override that allows you to specify the text direction and override the bidirectional algorithm. Use it with the value “rtl” (right to left) and you will get the entire text reversed in direction.

Example:

<bdo dir="rtl">Let’s see how fast you can read this!</bdo>

Result:

Let’s see how fast you can read this!

I doubt whether <bdo> has any useful or semantic value. It’s plain fun – a nice way to annoy your readers.

52 comments:

  1. Soft hyphens are a better way to do what you're doing in #3, and it's supported by all major browsers now:

    http://www.sitepoint.com/blogs/2008/05/23/two-hidden-features-new-in-firefox-3/

    ReplyDelete
  2. instead of wbr one can also use ­ as limi said

    ReplyDelete
  3. I'ts not a case of what can do it better, it's a case of obscurity. I haven't heard of any of these, so I'd say this passes on obscurity =)

    ReplyDelete
  4. you might ask the arabs if the bdo tag has any uses.

    ReplyDelete
  5. you have an error on fieldset legend. legend text says Title, but it appears as Form.

    ReplyDelete
  6. bdo is useful for right-to-left languages rendering left-to-right text or vice versa, not a gimmick.

    ReplyDelete
  7. Thanks for sharing.

    www.anon-tools.us.tc

    ReplyDelete
  8. [wbr] seems to work fine on Safari 3.2.1 -- the lines break in the same places as in Firefox.

    ReplyDelete
  9. [wbr/] should be [wbr /] (with proper brackets, of course)

    ReplyDelete
  10. Instead of [wbr/], can't you just use  ?

    ReplyDelete
  11. Err, that was "non-breaking space," or:

    {amp}nbsp;

    ReplyDelete
  12. bdo
    may be a value to display text for a language that reads right to left ( Hebrew Arabic and others I think )

    ReplyDelete
  13. HTML isn't an abbreviation, it's an acronym

    ReplyDelete
  14. Please show me where in the W3C document wbr or bdo exists. It doesn't and hasn't been in the docs since, oh, 1998.

    ReplyDelete
  15. I used to use obscure HTML tags back when I was a homeless rodeo clown but not any more. Now I am a world class magician !

    ReplyDelete
  16. bdo can be useful for languages that read right to left. Very useful to know.

    ReplyDelete
  17. Your fieldset and legend example is desperately missing label tags. Epic fail. This blog sucks, enjoy your AS money.

    ReplyDelete
  18. Good reminder about the form/fieldset/legend fields. I'm going to also try to remember to use the q/blockquote tags more often.

    ReplyDelete
  19. Hmm, maybe bdo can be used to hide mail-addresses from spambots.

    ReplyDelete
  20. Didn't know about [wbr]. The tags [dl], [dd] and [dt] are pretty rarely seen too. I had once seen them to make a simple popup menu too (using CSS). And the obscure tags [del] and [ins] can be used nicely in blogs to show struck out text and new text.

    ReplyDelete
  21. fieldset is required in the newer xhtml standards, so you will use it every day

    ReplyDelete
  22. All acronyms are abbreviations (NATO), but not all abbreviations are acronyms (DMV).
    The <acronym> element has been removed in HTML5 because of this ambiguity.

    ReplyDelete
  23. I wonder if the bdo tag could be used to prevent spam harvester bots to collect e-mails on sites... You could write your e-mail backwards and have the bdo tag reverse it in order to display it correctly.

    ReplyDelete
  24. Might want to check _wbr_s cross browser compatibility. I swear half the world doesn't knw about the _label_ tag either for some reason..

    ReplyDelete
  25. The RTL functionality is for right-to-left languages like Hebrew and Arabic.

    ReplyDelete
  26. I appreciate you bringing these to my attention, but it would have been *much* more useful if you could state whether they are officially supported in the HTML standard. As some comments suggest, several are not.

    Also, your examples don't actually give the results you claim, as in #3 and #4. This takes away from my willingness to rely on the other info.

    ReplyDelete
  27. the "Are you sure you want to leave" popup when I close this tab is the GAYEST thing I've seen on a website.

    I'll never be back on this crap site.

    ReplyDelete
  28. Why all the hate? Quite nice examples - though as a web designer I had heard of all of them, never used wbr though.

    ReplyDelete
  29. (wbr) works in Safari 3.2.1
    You might want to clean up your source for this page though. Your example source looks like:
    (wbr)(/wbr)(/wbr)(/wbr)(/wbr)(/wbr)(/wbr)(/wbr)(/wbr)

    ReplyDelete
  30. The abbr one (the first one) doesn't work when I hover my cursor over the text. No tooltip appears.

    ReplyDelete
  31. @Alexandre: That's clever. It might be possible to foil spam harvesters.

    And regrading the (wbr)(/wbr)(/wbr) in the source, it was automatically inserted by Windows Live Writer - the blog editor I use. I tried deleting them but no matter how much I try, WLW would insert them back. But the result would be the same. You can checkout the link I gave in the article for more info on wbr.

    ReplyDelete
  32. OK. Fixed the (wbr) issue in the source. Now the source code and the example code looks the same.

    ReplyDelete
  33. WBR is deprecated, which is why it's not referenced in many places anymore.

    ReplyDelete
  34. "HTML isn't an abbreviation, it's an acronym"

    Actually, HTML is an abbreviation and not an acronym. It is a specific type of abbreviation called an initialism.

    10 points for trying ;)

    ReplyDelete
  35. Don't forget the ADDRESS tag! It so obscure too.

    ReplyDelete
  36. The BDO tag could only be used to hide email addresses from spambots if you want to force your site readers to type in your address: It only affects text rendering, not the orders of the letters in the text. So, if you enter your address backwards in a <bdo> tag, and your users copy/paste your address, it will be pasted backwards.

    ReplyDelete
  37. BDO tag is very useful for guys like us, since our local language is written from right to left,so that's something we often use.
    languages like Arabic & dhivehi (Maldivian language - which is mine ) are written right to left.

    ReplyDelete
  38. I don't think fieldset counts as obscure considering it is necessary for valid forms in a 1.0 doctype.

    ReplyDelete
  39. awesome !!!!!!! :)

    ReplyDelete
  40. BDO is indespensible (sp?) for Arabic websites as many times Arabic text will be displayed on the English version (link to switch languages etc.)

    تحياتي لكل مصممي مواقع الإنترنت

    ReplyDelete
  41. This is one of the most inaccurate, pointless articles I have ever read...lol.

    ReplyDelete
  42. Why would you use the bdo element when you can use the dir attribute?

    ReplyDelete
  43. In reference to #3: "Opera and Safari has no support." This is incorrect. You should have said "Opera and Safari have no support."

    ReplyDelete
  44. Question: Where does the punctuated underline come from (example 1, "HTML")? Is this a standard in WordPress? Where can I find it there? Thanks a lot!

    ReplyDelete
  45. I use bdo to protect emails from spammers, this is how:

    http://www.alepe.com/about_computers/web_programming/hide_your_email_from_spambots.html

    ReplyDelete
  46. Do some research before you post..

    <bdo> is useful for right-to-left languages like Hebrew and Arabic.

    <wbr> is defined by the w3c
    http://www.w3.org/TR/html5/text-level-semantics.html#the-wbr-element

    ReplyDelete
  47. thanks for ur info. I'm copy this. check : http://ibravian.blogspot.com/2012/06/5-obscure-html-tags-that-you-should.html

    thanks :)

    ReplyDelete
  48. Wow -- incredibly useful, actually. The WBR is the best one, but never heard of the BDO, which may be useful.

    ReplyDelete
  49. I also find the <bdo> tag strange and want to know the usage...It's really annoying :)

    ReplyDelete