Hacker News new | past | comments | ask | show | jobs | submit login
Obscure HTML tags that you should know and even use (instantfundas.com)
32 points by kqr2 on Feb 14, 2009 | hide | past | favorite | 23 comments



They need to add 'label' to that list. It's not really obscure, but not enough people use it; not even the big sites (ahem, eBay.) It adds a good amount to the usability to the page, in my opinion.

('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)


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.


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.


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.


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


Flagged for the horrible JS that pops up when I want to close that tab and says "Are you sure?" Yes, I'm freakin sure.


I thought that was catchy somewhat, although quite weird.


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.


Interesting, especially the fieldset tag looks very useful, I didn't know about that one.


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.


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.


I personally use &shy; (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, &shy; is cutely memorable.


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


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).


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. :)


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


How is this different from a <pre> tag?


Markup is still parsed inside a <pre> tag. <xmp> is more like CDATA.


<pre> does the formatting, but not the escaping.



I couldn't open the page at all due to virus warnings.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: