10 Rare HTML Tags You Really Should Know

ameerulislam · Share | #1 (**permalink**) 04-03-2011, 06:11 AM

Just stumbled upon something that might prove useful. It's from tutsplus. Although the post is not new. It was written way back in 2009 but still I think it's green enough.

Quote:

Web developers these days are often expected to know and work in multiple languages. As a result, it’s tricky to learn everything a language has to offer and easy to find yourself not utilizing the full potential of some more specialized but very useful tags.
Unfortunately we haven’t been tapping into the full potential of these more obscure HTML tags as of late. But it’s never too late to get back into the game and start writing code that taps into the power of some under-used tags.
Here are ten of some of the most underused and misunderstood tags in HTML. While they might be less familiar, they’re still quite useful in certain situations.

http://net.tutsplus.com/articles/web...y-should-know/

Do you use those tags often?

MonkeyDance · #2 (**permalink**) 04-03-2011, 06:40 AM

Too many similar tags, like cite seems to look like italics and em(phasis).

I never knew about the optgroup but I've seen it done before and wondered how they did it.

Acronym/Abbreviate is neat, but it's basically the same as putting it in a span ..only you would have to set the border-bottom to dotted.

They forgot the strike tags <strike>striked text</strike>

kos · #3 (**permalink**) 04-03-2011, 06:42 AM

These are not rare at all, in 2009 maybe

, but not now

These html tags discussed in that article are all different by definition, and basically they can't all exists/be found on the same page. on a whole website, maybe, depends on the website's niche... if that website doesn't quote anything why would use the cite element anyway? If it doesn't use forms, why would they use labels? Maybe that made the author of that article write it in the first place, i don't know...

patrickz · #4 (**permalink**) 04-03-2011, 06:45 AM

That was a helpful article. Sometimes it's fun to avoid the CMS and hand-code the HTML, just like the old days...

ameerulislam · #5 (**permalink**) 04-03-2011, 06:51 AM

Hei Kos, I was thinking about how labels work as well. What is really the use of it. I didn't get their explanation.

<cite> might be used by Search engines to understand "bibliographic and other site references". I don't know.

kos · #6 (**permalink**) 04-03-2011, 06:55 AM

labels are form elements. see more here:
http://www.w3schools.com/tags/default.asp

hth

ameerulislam · #7 (**permalink**) 04-03-2011, 07:02 AM

Quote:

Originally Posted by kos

labels are form elements. see more here:
http://www.w3schools.com/tags/default.asp

hth

I saw that b4 but didn't get it either

. Is it an alternative to "Value" attribute or something?

kos · #8 (**permalink**) 04-03-2011, 07:09 AM

lol! no..

Quote:

The <label> tag defines a label for an input element.

The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.

The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

that's all there's for the label element that you should keep in mind. Also, on the w3c schools website they give live examples for almost anything so you can review them and see online how they work

ameerulislam · #9 (**permalink**) 04-03-2011, 07:52 AM

Quote:

The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.

I got it now. I was not understanding the one in the red above until I did the following and compared (although I read it few times

).

Code:

<html>
<body>

<p>Click on one of the text labels to toggle the related control:</p>

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>


<form>
Male
<input type="radio" name="sex" id="male" />
<br />
Female
<input type="radio" name="sex" id="female" />
</form>
</body>
</html>

kos · #10 (**permalink**) 04-03-2011, 07:53 AM

see, that was easy

ameerulislam · #11 (**permalink**) 04-03-2011, 07:54 AM

tx bro

MonkeyDance · #12 (**permalink**) 04-03-2011, 08:26 AM

Does anyone else find it funny that they're pushing the title tag as something rare?

kos · #13 (**permalink**) 04-03-2011, 08:46 AM

^^ where? the title tag is not mentioned in that list...

nemrod · #14 (**permalink**) 04-03-2011, 01:54 PM

I use about half of those regularly, and the rest I'm very well aware of but rarely have the opportunity to use.

Also, you can use labels with input elements that aren't radio buttons or checkboxes (i.e. text inputs) in which case clicking the label simply puts the cursor in the input element. (edit: just saw that was the example in the article, I only read the code in this thread

) I always use labels with my forms, for pretty much all elements.

A more coder-friendly way to use labels is to enclose the input element inside it. Example: <label>Name: <input type="text" name="name"></label>. Works quite well when you're not dividing the labels and input elements in different table cells or otherwise.

nemrod · #15 (**permalink**) 04-09-2011, 10:52 AM

Quote:

Originally Posted by charliesheensays.com

thanks for sharing this useful link. Some them are new to me and i dont understand why there are different tags for same job! what's the point of using <ins> tag when you can use <u> for the same result!

It's all about what HTML is for - semantics! <u> says nothing about what's between the tags, it's just presentational. <ins> on the other hand adds semantics, it's used for text that has been inserted into the text (and doesn't necessarily need to be presented in the default way). If you're making a change to a text, for example replacing a word with another but want the readers to be able to see what has been changed then you can use it in combination with del like this:

HTML Code:

The latest version of CSS is <del>2.1</del> <ins>3</ins>.

edit: reading the linked article again that's exactly what he's saying already, haha! Oh well, another example and my point about semantics still stand. <u> is presentational - it undelines. <ins> is semantic - it shows text that has been inserted. <ins> doesn't necessarily need to be underlined.