Useful HTML elements that 90% of all developers are unaware of

[jofa]

This week I "discovered" the <fieldset> element, which has been around for several years, but was completely unknown to me - until now (thank you beetle ! )

I really like this way of creating something similar to a GroupBox/Frame control in a WinForms application (<legend> == Text/Caption)
Think I will use it very extensively to group related fields in the future

Another element, that I knew existed, and also have used a lot in my forms is the <label> element
However, I've noticed that using <label>s next to form elements is unusual, I guess it can't hurt to talk about that one too

In fact, why not encourage you all to resurrect "unknown" elements, attributes etc that you believe are useful but rarely used by the majority?


Finally, a little example, how to use <fieldset> and <label>

    ...
    <form action="">
      <fieldset>
        <legend>My favourite thing is...</legend>
        <input type="radio" id="optFav0" name="optFav">
        <label for="optFav0">Raindrops on roses</label><br>
        <input type="radio" id="optFav1" name="optFav">
        <label for="optFav1">Whiskers on kittens</label><br>
        <input type="radio" id="optFav2" name="optFav">
        <label for="optFav2">Bright copper kettles</label>
      </fieldset>
      <p><input type="submit"></p>
    </form>
    ...

[Patriarch]

I've got two, one is an HTML attribute, the other is a CSS gem.

Well, I just recently finished writing an XHTML/CSS frontend to a SQL Server database at work, and one of the requirements was to print out coversheets for documents contained in the database. This usually isn't too hard, the catch was that my boss wanted several records printed out at once, and all on seperate pages.

At first I thought I'd have to do some fancy JavaScript or use some kind of messy browser plugin, when I realized through the magic of CSS and XHTML, that I could use the page-break-after which automatically breaks to a new page after the closing tag of the container element!

A nice little HTML element that's been around for awhile, but I haven't seen used often is the NOWRAP attribute, which is a lifesaver when you just can't have that table cell wrap.

[vgarcia]

Forgotten elements/properties:

HTML tags:
<abbr>
<acronym>
<caption>
<col>
<colgroup>
<th>
<thead>
<tbody>
<tfoot>


CSS Properties:
text-transform
white-space
position: fixed;
margin: auto; seems to be unknown too

[mattjacob]

What about the HTML <blink> tag? That's one you don't see being used too often these days.

[jofa]

Originally Posted by mattjacob

What about the HTML <blink> tag? That's one you don't see being used too often these days.

Useful HTML elements!

[vgarcia]

Originally Posted by mattjacob

What about the HTML <blink> tag? That's one you don't see being used too often these days.

It's now covered in CSS, unfortunately:

.annoying {
     text-decoration: blink;
}

[mattjacob]

Originally Posted by jofa

Useful HTML elements!

OK, OK, fair enough. Nobody mentioned using <strong> and <em> in place of <b> and <i>. As far as CSS goes, I've found the following to be pretty useful as of late:

form.oneLineForm {
display: inline;
}

I had to use that for a project at work where the client wanted a text blurb ('Enter your email address'), followed immediately by an input field, followed by a 'Go' button... all on the same line.

[Hierophant]

Originally Posted by Patriarch

A nice little HTML element that's been around for awhile, but I haven't seen used often is the NOWRAP attribute, which is a lifesaver when you just can't have that table cell wrap.

NOWRAP is deprecated. You should use the word-space property in CSS.

[redux]

90% of developers ? hmmm....i must fall into the 10% then...

but while i'm here...any of you ever use the <q> tag ?

[mattjacob]

Originally Posted by redux

but while i'm here...any of you ever use the <q> tag ? [img]images/smilies/smile.gif[/img]

If I have, I certainly can't remember it! What do you personally use it for?

[jofa]

Originally Posted by redux

90% of developers ? hmmm....i must fall into the 10% then...

Lucky you

Originally Posted by Poll in HTML and XHTML Forum

The label element - ever use it?
Always/often [ 1 ] 11.11%
sometimes/rarely [ 0 ] 0%
Never [ 8 ] 88.89%

OK, now I see that total votes is only 9 , but I still think the number 90% is correct
For example; does this forum use the <label> tag?

[jofa]

And I still think this thread is a good idea, and Vinnie posting e.g. the <th> is excellent, beacuse a lot of people don't know that it exists, another lot of people never uses it etc etc

[Hierophant]

Originally Posted by jofa

Lucky you



OK, now I see that total votes is only 9 , but I still think the number 90% is correct
For example; does this forum use the <label> tag?

No this forum doesn't. However when vBulletin 3.0 final is released, the default templates will use the label tag appropriately. They will also use the fieldset and legend tags.

<th> is one of my favorite tags. I use it whenever I create a table for the column headers. Makes formatting so much easier because I can apply it directly to the tag instead of a class to differentiate the column headers from standard data cells.

What about <tfoot>? I see a lot of people use <tbody> but hardly ever see <tfoot> used. While we are on the subject of tables, I haven't seen many people use the caption, colgroup or col elements in the past either. Does anyone use any of these?

[redux]

i use <label> all the time...i'm required to make my work site (uk university) accessible to at least W3C WAI Level A or better...so labelling my form elements is a must...and it has a huge number of "coincidental" advantages (e.g. checkboxes with a proper label associated can be ticked by clicking on the label text itself, and not just the box...making them a lot easier to "hit" )

[mattjacob]

Originally Posted by redux

checkboxes with a proper label associated can be ticked by clicking on the label text itself, and not just the box

And if you want to get crafty about it, you could do something like this:

<label for="email" accesskey="e"><span class="underline">E</span>mail address:</label> 
<input name="email" type="text" id="email" />

I also usually apply the pointer cursor to <label> via CSS:

label {
	cursor: pointer;
}

[vgarcia]

I'm a heavy user of <fieldset>, <legend>, and <label> . The first time I used fieldset and legend at work people thought I used some kind of CSS hack to get the "framed" appearance .

[jofa]

Originally Posted by mattjacob

<span class="underline">E</span>

Being picky; isn't "underline" a bad name for a css class, should be "initial" or something?

[jofa]

Two well known attributes, but does everyone know what they are meant for?
alt

Originally Posted by w3.org

For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.

title

Originally Posted by w3.org

This attribute offers advisory information about the element for which it is set.

Some browsers (read: IE) use the alt attribute as title (i.e. "tool tip") if no title is supplied
Other browsers (read: Mozilla) display a "tool tip" only when title is set
And then some people get it all wrong and accuse Mozilla of being wrong

[Cam]

I've used <th> for a while now, the first time I found it was when I was modding phpBB and they used <th> and I did a search and found out what it was.

<fieldset> and <legend>, I also knew of their existence but only because they are used at PHP and I saw them, thought they looked interesting and checked out the code.

There is a lesson to be learned here, if you visit another site and think something there is nifty, check the source. It might just be something simple that you never knew about

[Cam]

Also, with <strong> and <em>, I've heard somewhere (I think) that they are occasionally rendered differently in different browsers but should still be used as aural browsers and such use them to accent words and stuff.

[Darin]

Originally Posted by mattjacob

And if you want to get crafty about it, you could do something like this:

<label for="email" accesskey="e"><span class="underline">E</span>mail address:</label> 
<input name="email" type="text" id="email" />

I also usually apply the pointer cursor to <label> via CSS:

label {
	cursor: pointer;
}

I don't get what the accesskey="e" does?

[hurricane.uk]

Originally Posted by Darin

I don't get what the accesskey="e" does?

It passes the focus to the label when the access key is typed. So typing e would focus the cursor at that label, and from there to the input box etc, or in this case the email client.

[Webnauts]

Originally Posted by vgarcia

Forgotten elements/properties:

HTML tags:
<abbr>
<acronym>
<caption>
<col>
<colgroup>
<th>
<thead>
<tbody>
<tfoot>


CSS Properties:
text-transform
white-space
position: fixed;
margin: auto; seems to be unknown too

<Q> not?

[mattjacob]

Originally Posted by hurricane.uk

or in this case the email client.

...or in this case a text field.

[jofa]

Originally Posted by w3.org

... Q is intended for short quotations (inline content) that don't require paragraph breaks.

I guess <q> is better than adding "static" quotation marks, because quotations can be rendered in different ways in different languages etc, and it should be possible to make nested quotations behave correctly (inner/outer quotation marks using ' and ")