Sunday, 24 June 2012

5 Obscure Html Tags That You Should


Assalamu'alaikum Wr. Wb.


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.


credit : here


No comments: