Underused Features of HTML

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

<abbr>

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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

Answer 10

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.

Answer 11

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.

Answer 12

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!

Answer 13

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

Answer 14

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.

Answer 15

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

Answer 16

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.

Answer 17

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

Though extremely poorly supported by MSIE.

Answer 18

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.

Answer 19

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 = {
bees:10,
wasps:5
};

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

<!-- //--></div><div class="information" id="output"><!-- JS output --></div></body>

Answer 20

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.

Answer 21

Microformats.

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

Answer 22

<blink></blink>

:)

Answer 23

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!

Answer 24

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

Answer 25

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!

Answer 26

<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! :(

Answer 27

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

Answer 28

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.