Yes, many web developers live and breathe HTML, but there are still tags and tricks that aren't used as often as they could be. What are some of your favorites?

+19  A: 

I think that <fieldset> is often overlooked. It's an easy way to group form fields together.

When presenting a large form, there are typically logical groups of data. Using a fieldset with a <legend> can visually separate the input fields, making it easier for the user.

It can also be used out side the context of a form to present an easily styled box with a header element.

See this page for an example.

My question is - Does Fieldset belong in HTML or is it something that is best accomplished using divs/spans and CSS?
Thomas Owens
Never heard of this tag before. Can you edit to explain why its "underused?"
Outlaw Programmer
[fieldset]( is quite literally what it is - a set of form fields.I agree that it is underused. I try to split forms into related groups purely for visual ease, however they should be considered like paragraphs.
<fieldset> is handy because in Strict documents, you cannot have inline elements as direct children of <form> elements. <fieldset> belongs in HTML because it's nothing to do with presentation, it's about logically grouping form elements.
That makes sense. Thanks Jim.
Thomas Owens
+19  A: 

These "Hidden tricks of X" threads are getting repetitive but here's a few tags that aren't used enough:

  • address - for addresses, obviously
  • dfn - for definitions
  • colgroup - can make styling tables so much easier (doesn't support background attributes however)
  • label - every input should have one
  • ins and del - content revisions should be semantic too
The nice thing about the Hidden Features posts is that they're high profile enough to hopefully happen just once for each area they cover.
John Sheehan
The <address> element is actually only for the contact details of the person/organisation responsible for the document, it's not intended for generic addresses.
Interesting to know Jim, I can see how that would make sense when in relation to the document's context.
Interesting that StackOverflow itself does not use <ins>/<del>, where it's perfectly applicable. I believe there were some browser issues with it (I think IE5 hid <del> content completely!), but I am sure that can be fixed with CSS.
I thought SO used ins and del in it's question revision diffs but I'll check that.
"<span class="diff-delete">breath</span> <span class="diff-add">breathe</span>" Ugh! Poor show SO, poor show.
+6  A: 

One thing that seems to me to still be pervasive in the use of HTML is overuse of non-semantic constructs, such as tag soup. Simply learning about the HTML constructs that have been around since the early days of HTML, such as ordered/unordered lists, header tags, rather than relying on the trusty (rusty) old div.

Wes P
+7  A: 

I love <ins> and <del> for editing blog posts.

James A. Rosen
+4  A: 


Marc Gear
+37  A: 

A bit of overlap here but I would definitely recommend reading Five XHTML Elements You Didn't Know But Were Afraid to Ask. It speaks to:

  1. <optgroup/>
  2. <label/>
  3. <fieldset/> and <legend/>
  4. <col/> and <colgroup/>
  5. <acronym/>

And provides examples of each.

wow, I love optgroup and fieldset/legend!
Chris Marasti-Georg
label is a great usability tool imo.
Ólafur Waage
acronym and abbr are often misused, partly thanks to W3C's bad descriptions. It lists WWW and HTTP among the 'abbreviations', but they're actually acronyms.
Label and Fieldset are essential for me.
I didn't encounter fieldset for years and discovered it completely by accident.
christian studer
@DisgruntledGoat: actually, according to GrammarGirl, www and http are abbreviations. Acronyms must be pronounced as words, not read as letters.
Michael Haren
+1 for label. I can't imagine not using it in my forms. Blasphemy!
<acronym> is dead in (X)HTML 5. Long live <abbr>!
I think it's just HTML5. <acronym> is deprecated in HTML5 and nothing more to be confused of.
+12  A: 

Definition lists are often not used to their full potential. Quite useful in adding structure to chronological or alphabetical lists, as well as the natural use for definitions. <dl> <dt> and <dd> are the code elements for the container, "term" and "definition" respectively.

Martin Lussier
+5  A: 

The word "element" is underused, even the HTML 4.01 specification states this:

Elements are not tags. Some people refer to elements as tags (e.g., "the P tag"). Remember that the element is one thing, and the tag (be it start or end tag) is another. For instance, the HEAD element is always present, even though both start and end HEAD tags may be missing in the markup.

See also: Lachy’s Log: HTML Tags.

I find it easier to just say tag all the time, since I otherwise mix up when element and when tag is the correct word to use.
Have you ever heard a non-technical user refer to the entire system box of a computer as "the hard drive"? That's what you sound like to others when you use the word "tag" when you mean "element". The difference between them is not hard to understand, you'd do yourself a favour to figure it out.
I always go with element, but I know when to say tag too! Thanks +1
+9  A: 

Use of the title attribute with elements, particularly images and anchors.

John Topley
I'm curious as to what this accomplishes.
Thomas Owens
It enhances accessibility, gives you another place to put keywords for SEO purposes, and most conveniently, gives you a popup "tooltip" when you hover in most major browsers
+5  A: 

A few tags I find interesting are the <dfn>, <kbd>, <var> and <cite> tags, for formatting various types of text into groups browsers can understand. Maybe not useful enough to deserve the term "underused," but they're interesting and relatively unknown.

Evan Hanson
I always get confused as to which phrase elements to use when posting code fragments. There's `<code>` of course, but I usually use that for blocks of code. Then you have `<kbd>` for input (good for keyboard shortcuts) and `<samp>` for sample output...
+5  A: 

Already mentioned, but I dont think you can mention it enough:

It is so easy to throw in a label for each of your form fields, and it makes the usability much better. Maybe it's just me, since I've become accustomed to labels, but I like being able to click on the text next to a radio button to select that radio button.

That bugs me too!
+5  A: 

The scope attribute (to tell a th cell which dimension it refers to) and the caption tag, which is used as a heading for tables. I find myself constantly reminding others of their existence!

The scope attribute is handy because you can hang styles off it using attribute selectors. For instance, you can right-align scope=row headings, but left-align scope=col headings.
Hey, it's you again! On this one, I agree with you. :)

One feature that is should NOT be used more than it is being used is the "blink" tag.

awww to bad the blink feature works only in the previews :(
I'm about to propose to the W3C the <seizure> tag...
+6  A: 

Not enough people pay attention to using the right DocType

Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.
Use Strict DOCTYPE! Transitional was only for (as name implies) transitional period from old presentational HTML (<font>, etc.) to CSS. Since CSS works now, everyone (except time travellers) should use Strict only.
+1  A: 

It's hard to say <h1> is underused, but it is very efficient, accessible, and SEO-friendly to have the company/site logo in an h1 tag, backgroud-imaged, with text stating the company/site-name within h1.

This semantically designates it clearly as the most important content on the page, and does wonders for getting your site into the search results in searches for the site name (along with, of course, the title element).

+2  A: 

I miss full browser support of the link tag. I think maybe Mozilla Seamonkey still has a 'site navigation' toolbar, which lets you navigate multipage documents easily, if they were marked up with navigation links in their headers. Latex2HTML supported them, which was pretty handy back when there when lots of web pages were still generated with that (before pdf took over for academic publication on the web).

<link rel="next" href="page2.html" />
<link rel="up" href="table_of_contents.html" />

Now that (so far as I know) no major browser supports them explicitly, it seems that the only use for these tags is in prefetch, which is still pretty important. See this DevMo article on using link tags for prefetch, for example. For adding support to firefox, there is at least one plugin available.

Opera ( has support them for a while.
In Opera, go to Tools>Appearance>Toolbars and check 'Navigation Bar'. Also best to tick 'Show only when needed' so it only appears when a site uses the link tag with rel/rev.
+4  A: 

The <button> tag. Much more powerful than <input type="{button|submit}">.

Though extremely poorly supported by MSIE.

Roman Odaisky
the button tag is fixed in IE8 (in IE8 standards mode) ;-)
IE6 sends all button elements and IE7 sends the innerHTML of the button clicked... Just a warning!
+2  A: 

Usability-wise it is extremely important to always use <label> if you use input type radio or type checkbox. This lets the user click not just on the radio button or check box, but also on the caption that is next to it, which makes the clickable area for the control much bigger.

Another trick that is often forgotten is that you can have multiple submit buttons on the same form, each with a different name and caption, and that which button is pressed is sent to the server. I see javascript being used a lot to put multiple action buttons on a form, where it is often not necessary.

Joeri Sebrechts

This certainly comes under the "tricks" heading... you can have a file that works as both a Javascript file and an HTML file.

Because browsers allow external javascript files to have any file extension, you can have a file that opens in browsers as HTML but which can also be loaded as a script file:

<!-- //--><head><title>JSHTML Example 1</title><style>.code {display:none}</style></head><body><div class="code">

var a = "Variable available if page is loaded as JavaScript";

<!-- //--></div><div class="information">Visible if file is opened as HTML</div></body>

This is handy when saving data to a file that users can open from their desktop but that can also be parsed by a web page.

Here, the file "jshtml.html" calls itself as a script to show the javascript data it contains in a friendly way:

<!-- //--><head><title>JSHTML Example 2</title><style>.code {display:none}</style><script src="jshtml.html"></script></head><body onload="fn()"><div class="code">

var a = {

function fn() {
var msg="There are "+a.bees+" bee(s) and "+a.wasps+" wasps.";

<!-- //--></div><div class="information" id="output"><!-- JS output --></div></body>
Odilon Redo
Nice trick, but <div class="code">? Please don't fall prey to "divitis". A perfectly reasonable <code> element type exists.
+4  A: 

The "rel" attribute.

Every html element can have its rel attribute set, which is extremely handy for when you're working with an existing site or webapp and need to pass an extra attribute to the element without altering its existing class or id.

Sam Wessel
And the corresponding "rev" tag, too.
Did you know that you can put multiple classes on an elements? For example, class="class1 class2 class3"
After googling rel/rev, I'm still not sure what the purpose of these are for, or what it gives you. Can someone clarify?
Jeremy Cantrell
Every?? I did not know this... could possibly be a good hook for Javascript.
+3  A: 


Although they are not a 'feature' of HTML (rather an application of it), they add an important semantic layer on top of existing data.

+1  A: 


Matias Nino
don't forget <marquee></marquee>
+17  A: 

I've been marking up HTML documents for a LONG time, and this one blew me away recently. When I link to particular place in a page, section headings for example, I use the anchor tag with the name attribute:

<a name="section1"><h1>Section One</h1></a>
    <p>Content here...</p>

<a name="section2"><h1>Section Two</h1></a>
    <p>Content here...</p>

Then I refer to it like so:

<a href="foo.html#section2">See Section Two</a>

What I didn't realize, until I was researching something else in the W3C HTML standard, is that I can achieve the same thing with much less mess and typing by assigning an id attribute to the <h1> (or most any other) element. The element with the id attribute is treated as a link destination within the page, and many of my page's contents are already assigned id attributes for CSS styling and positioning:

<h1 id="section1">Section One</h1>
    <p>Content here...</p>

<h1 id="section2">Section Two</h1>
    <p>Content here...</p>

The same link works as before, but the page's markup is much cleaner:

<a href="foo.html#section2">See Section Two</a>

All modern browsers will work with this feature, and it's been part of the HTML standard since HTML 4.0 back in 1997. I've really got to spend the weekend reading the whole standard!

This is amazing! Thank you +1 (2 if I could)
+3  A: 

wbr: tells the browser that if it has to break a word, this is the place to do it, but otherwise is invisible.

+6  A: 

On more than one occasion I have found the <thead> and <th> elements invaluable for building tables of data. So often I see people just "bold" the first row of a table's body.

Also, it is overlooked that a table can have more than one <tbody> element. While I haven't specifically found this valuable yet, it's a cool feature just waiting to be exposed!

Zack Mulgrew
The jQuery tablesorter plugin uses the <tbody>.
<col align="char" char=".">

Aligns numbers in a table column to the decimal point. Much nicer than having to manually pad the data with zeroes or non-breaking spaces.

The reason it's underused... no browser support! :(

Ant P.
+2  A: 

I like the <wbr> tag, which can be used to break up single words across multiple lines (for instance, a very long URL.)

Peter J
+1  A: 

The <noscript> tag, so you can at least provide a "this site requires JavaScript" style message to those people with scripting turned off. Better to support such users properly, of course, but the reality is that for many projects you won't have the time.

David Easley
Use progressive enhancement instead!