10 underused and neglected HTML tags

Posted by Ben Barden on January 14, 2009 | Permalink | Hits: 188 

< 10 overused and abused HTML tags | Coding and Web Standards | 10 misconceptions about web accessibility >

Image by psilver (silverph).

As a follow-up to my post, 10 overused and abused HTML tags, which HTML tags are underused and neglected?

This was a tricky list to compile, but maybe I left a couple out. Add your thoughts by posting a comment.

1. Header.

Some sites publish content without headers to break up the text. But it's not just that. Some people choose to make the text look like a header (say by making it bigger and bolder) but they don't actually use a heading style.

Don't rely on CSS to make some text look like a header. Make it a real header and apply a consistent style to your headers with CSS, instead of styling them one by one. And make sure you use headers in the right order - start with h1 for the page heading, then use h2 for a section header, h3 for a subheader and so on.

2. Abbreviation.

If you use an abbreviation in your posts, it's a good idea to explain what it means - but if you keep using the abbreviation over and over, it's handy just to use the abbr tag. Let's see if this works: CSS. (Hover your mouse over the "CSS" text.)

Internet Explorer 6 doesn't support it though. Oh well.

3. Label.

Think of a login form where you enter your username and password. The labels for this form would be "Username" and "Password", i.e. the bits of text that tell you what to put in the fields.

The problem is that all too many sites just put the text there without using the label tag. You can test it quite easily - try clicking the text next to the box you want to fill in. If it's a text box with a label, clicking the label should put the cursor into the text field and highlight the text within (if any exists). If not, you'll just see the cursor change to the "text editing" pointer and clicking the text won't do anything.

It's even worse with checkboxes and radio buttons. Without labels, you have to click in the tiny little box instead of being able to click the label to select or deselect an option. You may be surprised to find how many major websites (even the nice-looking ones!) fail to grasp this extremely handy tag.

4. Blockquote.

Another example of a tag where people like to indent their text to make it look like a quote, when they should be using the blockquote tag.

This is what a real blockquote looks like.

Not that I use a particularly fancy look for my quotes, and your blog won't put that fancy look into your feed, either.

5. Code.

Got some code to display? Again, don't just style it... put it in a code tag.

you could put some code here, but I'm not going to!

Still, that's how you should do it...

6. Paragraph.

OK, it's not really that underused, but it IS annoying when people write in very long paragraphs and don't split them up. And I don't like seeing two line breaks instead of a paragraph, either.

7. Definition lists.

These can be quite handy if you have a glossary, for instance. They are used to show a list of terms with their descriptions. It's better to use a definition list than a table.

8. Unordered lists.

Ah yes, I like lists! Good old unordered lists - you know, the ones that usually have bullets - are great. But as you can choose not to display the bullets, the correct term is not a "bulleted" list. Lists are a good way to break up your posts.

9. Div.

I find it very frustrating to design a site using only divs. It's a bit idealistic, it seems to take forever to get just right, and you can easily end up with lots of divs nested inside each other.

The reason I think they're underused is because I still see a lot of sites that use a table for something that is a lot simpler to do with a div. Especially if you want to display a banner at the top of your site. You don't need a one-row, one-column table for that.

Sure, tables shouldn't be used for layout purposes, and in this case I support the use of divs. But for a complex design, until it becomes feasible to design the whole site in divs, I will consider tables some of the time.

10. Anchor.

I'm not keen on too much link love, but sometimes, it seems like some sites are going the opposite way. They simply refuse to link to any other sites for fear of everyone leaving their site for another. Or they don't want to share their good stats with anyone who has a smaller site.

To those people, I say this: Get over yourselves. The web should be all about linking. If you never link to other sites, maybe it suits your site, maybe it doesn't - but if you link out, you can build strong relationships. Why don't you try it once in a while?

In summary

A lot of these issues relate to the use (or non-use) of tags that look a certain way. HTML is a structural language, and if you only use font sizes, bold text and indentation, your pages will be a nightmare for people who have either limited support for CSS in their browser or browsing device, or those who don't have any support for it at all. Use the correct HTML tags to structure your pages, and use CSS to make them look nicer.

What do you think? Can you think of any other underused HTML tags?

Comments on 10 underused and neglected HTML tags