10 Rare HTML Tags You Really Should Know
July 2nd, 2009
1. <cite>
Commonly known as <blockquote>’s little brother <cite> tag allows your to define the text inside of the element as a reference. You will observe that the browser will render the text inside the <cite> tag in italics which can be changed with CSS.
The <cite> tag is really functional for citing bibliographic and other site references.
2. <optgroup>
If you want to add a little definition between groups of options insides a selected box, <optgroup> tag is a great way for it. For example if you want to list a group of movies by time it would look like this:
1. <label for=”showtimes”>Showtimes</label>
2. <select id=”showtimes” name=”showtimes”> <optgroup label=”1PM”></optgroup> <option value=”titanic”>Twister</option> <option value=”nd”>Napoleon Dynamite</option> <option value=”wab”>What About Bob?</option> <optgroup label=”2PM”></optgroup> <option value=”bkrw”>Be Kind Rewind</option> <option value=”stf”>Stranger
3. <acronym>
The <acronym>tag is used to define or further explain a group of words.
The <acronym> tag is a way to define or further explain a group of words. When you hover over text that has the <acronym> tag used, a box appears below with the text from the title tag.
For example:
1. The microblogging site <acronym title=”Founded in 2006″> Twitter</acronym> has recently struggled with downtimes.
4. <address>
The <address> tag is quite an unclear tag but doesn’t mean it is not useful. As the name implies, <address> tag allows you to markup addresses in HTML. This natty little tag makes all the data within the brackets into italics, though the style can simply be changed via CSS.
1. <address>Ideaz Inc.
B-19, Golf View Apts., Saket
New Delhi - 110017, India </address>
5. <ins> and <del>
<ins> and <del> are two tickets to display editing revisions with markups.<ins> implies what has been added to the document with an underline, <del> shows what has been taken out with a strikethrough.
For instance:
1. Tom<del>likes</del> <ins>LOVES</ins> his new mobile.
6. <label>
We often forget form elements while marking up a document. One of the most forgotten form elements is <label> tag. <label> tag is a quick way to note the label’s text and it can also pass a “for” attribute to specify which element if to be given to the label. <label> tags are great for styling and also allow you to make the caption clickable for the associated element.
1. <label for=”password”>Password</label>
<input id=”password” type=”text”>
7. <fieldset>
<fieldset> is an attribute that can be added to your forms to logically group form elements. This tag when applied draws a box around the element within the fieldset. There is one plus point for adding a <label> tag within the fieldset to define the title of the group.
1. <form><fieldset>
<legend>Are You Smarter Than 6th grade?</legend>
Yes <input name=”yes” value=”yes” type=”radio”>
No <input name=”no” value=”no” type=”radio”>
</fieldset>
</form>
8. <abbr>
The <abbr> tag is analogous to the <acronym> tag, except that the <abbr> tag is only used to describe truncated words. Just like <acronym>, you label a title within the tag. When a visitor hangs around the abbreviated text, the full definition appears below. Though seldom used, the <abbr> tag benefits mainly for spellcheckers, screen readers and search engines.
9. <rel>
The <rel>attribute can be frantically useful as any HTML element can apply It is helpful for passing extra variables that aren’t otherwise specified. Useful while using JavaScript with your HTML. If you want to edit a link online, you might add.
1. <a rel=”clickable” href=”page.html”>This link is editable</a>
The JavaScript might be looking for a link with the< rel> attribute “clickable”. It knows how to apply some Ajax and allow it to be edited online. This is one of the many techniques you can use with the <rel> attribute, as the possibilities are continuous.
10. <wbr>
The <wbr> tag is an incomprehensible tag. And it is hardly even used. Essentially, the tag allows you to indicate a place where you think a line break might be useful, but only if needed. This tag is distinctive as it relies on the caution of the browser to insert the line break, if needed. It’s perfect for creating layouts that you want to avoid having horizontal scrollbars.
If you wanted to achieve the same effect but without using the <wbr> tag, you could also try ‘or’. It should be noted that none of these tags have full support across all browsers.
Source from : http://net.tutsplus.com/articles/web-roundups/10-rare-html-tags-you-really-should-know/
Ideaz Inc designed the corporate website for TATA Strategic Management Group - one of the largest management consulting firms in South Asia.
