Obscure HTML tags that you should know and even use(instantfundas.com)
instantfundas.com
Obscure HTML tags that you should know and even use
http://www.instantfundas.com/2009/02/5-obscure-html-tags-that-you-should.html
8 comments
Yeah, label is great.
You can associate a label with any element without having to nest the element in the label too; just use label's for attribute with the element's ID. It's useful, for example, if you want the labels in one column and the form controls in another.
Make sure to have the label take the maximum available space; if you have a label centered in a table cell you want the label to span the whole cell so it's easier to click on it to select the associated control.
You can associate a label with any element without having to nest the element in the label too; just use label's for attribute with the element's ID. It's useful, for example, if you want the labels in one column and the form controls in another.
Make sure to have the label take the maximum available space; if you have a label centered in a table cell you want the label to span the whole cell so it's easier to click on it to select the associated control.
Once I started using <label> for all my forms, I became quite keenly aware of others' forms which don't use it. It's extremely convenient.
edit: http://htmldog.com/ has great tutorials on modern and complete form building. It's a fantastic resource.
edit: http://htmldog.com/ has great tutorials on modern and complete form building. It's a fantastic resource.
Other than making the site more usable for people that can see, the label tag can also make the site more usable for blind people or anyone using screen readers. When you associate the label with a input field then the screen reader will know what to read for a particular input field. This is accomplished by adding a for="idOfInputField" to the label.
Firefox froze when this page loaded.
Default behavior for fieldset is different under IE, FF and Opera. IE rounds the corners where FF and OP do not. Not critical but if you're after the same look and feel it should be tested. Didn't try CSS with it.
Default behavior for fieldset is different under IE, FF and Opera. IE rounds the corners where FF and OP do not. Not critical but if you're after the same look and feel it should be tested. Didn't try CSS with it.
Interesting, especially the fieldset tag looks very useful, I didn't know about that one.
Beware, wbr is not part of the HTML 4 standard (I'm not sure it's part of any standard). The other tags are standard.
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 it wishes?! Because I'm always on the hunt for tags that will introduce more ambiguity in my layouts across browsers, I don't have enough yet. o_0
If it wishes?! Because I'm always on the hunt for tags that will introduce more ambiguity in my layouts across browsers, I don't have enough yet. o_0
I think you don't understand the intent. It's to help you give hints to the rendering engine about where you'd prefer to have line breaks if there needs to be one nearby, so that you can tweak some of your text so it reads better.
I'd be surprised if it broke your layout on a browser (aside from the fact it's not a standardized tag).
I'd be surprised if it broke your layout on a browser (aside from the fact it's not a standardized tag).
Ah, I see, you're right. Actually taking the time to read more of the referred to page on quirksmode.org does make the intent of the tag clearer. The quote taken out of context in the article does make the tag sound like rather ridiculous though.
More from quirksmode.org:
I use it a lot in the great compatibility tables. These tables are very large and very tight, and I wish to avoid horizontal scrollbars, if possible. These scrollbars are mainly caused by the length of method or attribute names, for instance getElementsByTagName(). Therefore I do:
<div class="name">getElements<wbr>ByTagName()</div>
I give the browser the option of adding a line break. This won't be necessary on very large resolutions, when the table has plenty of space. On smaller resolutions, however, such strategically placed line breaks keep the table from growing larger than the window, and thus causing horizontal scrollbars.
I still won't be using it. :)
More from quirksmode.org:
I use it a lot in the great compatibility tables. These tables are very large and very tight, and I wish to avoid horizontal scrollbars, if possible. These scrollbars are mainly caused by the length of method or attribute names, for instance getElementsByTagName(). Therefore I do:
<div class="name">getElements<wbr>ByTagName()</div>
I give the browser the option of adding a line break. This won't be necessary on very large resolutions, when the table has plenty of space. On smaller resolutions, however, such strategically placed line breaks keep the table from growing larger than the window, and thus causing horizontal scrollbars.
I still won't be using it. :)
I personally use ­ (soft-hyphen) where this article uses <wbr>. Inserting hyphenation over plain line-breaking help the reader to understand that the words are joined (conventionally, at least), and make the resulting text read more like prose. Also, ­ is cutely memorable.
It's not a real tag anymore, but <xmp> was really cool. Everything between the start and end tag was presented verbatim, with no HTML parsing. Basically a lazy man's HTML escape in a fixed width font--good for pasting in code. We use it every now and then for our internal tools since Firefox is down with xmp.
http://www.blooberry.com/indexdot/html/tagpages/x/xmp.htm
http://www.blooberry.com/indexdot/html/tagpages/x/xmp.htm
How about the <optgroup> tag: http://www.w3schools.com/tags/tag_optgroup.asp
I couldn't open the page at all due to virus warnings.
flagged because it opened popups, i think it tried to install some software, froze firefox a few times, then gave me a popup asking me if I really wanted to leave
It didn't do that for me, with either Konqueror or Firefox.
thats strange, I tried it again and it didnt do any of those
It certainly behaved very badly for me - also flagged.
('label' associates another block of text/html with an input field. So if something says: Name: |_________|, and Name is wrapped in the label tag, clicking on Name is enough to give the textbox focus)