David Coffey - Web Designer & Developer

The coolest HTML tags you’re not using

Posted by David on 16 November 2009 | 31 Comments

Tags: HTML, coding, web

There’s been a lot of talk lately about "Semantic HTML", or in other words, trying to use descriptive code to markup your content with. Semantic HTML is crucial for search engine optimization since it helps web crawling bots to understand your content.

There are a few HTML tags still in the W3C recommendation status that are pretty useless and should probably be depreciated, but there are others that you probably haven’t heard of that could actually be quite useful.

So the next time you’re building a webpage and you go to type <div> or <span>, stop and consider using one of these!

<base>

This tag might be the most powerful tag in this list. What it does is defines a base URL for all the links on your page. This would be useful if you could not use relative URLs for some reason. You could define your base URL as http://www.example.com/ and then make the rest of your URLs relative off of that. Then if you ever moved domains all you would need to do is change this <base> tag.

Another thing you can do with the <base> tag is specify a default target for all the links on your page. For example in your head you can say <base target="_blank" /> which would make all the links on your page open in a new window unless specified otherwise.

<bdo>

“The <bdo> tag allows you to specify the text direction and override the bidirectional algorithm.” –W3C

In other words, it writes your text backwards.
Turn this: “My name is David!”
Into this: “!divaD si eman yM”

Apparently this is useful in the middle east for languages that read from right to left, but here in America it’s completely useless. However, this could be great for mischief around the office.

<acronym> and <abbr>

This one would be especially great to see in use around where I work here in the DC area, where acronyms and abbreviations are like the plague (more on that in another blog post).

But you can define the real meaning of an acronym or an abbreviation in these tags while still using it for your body text. This will allow search engines and screen readers to be able to read the full meaning of your acronym. Also when you hover on it the little hover hint will appear with the full meaning.

<acronym title="as soon as possible">ASAP</acronym>
becomes:
ASAP

<label>

This is a great one for your forms. You use this to define a label for a form element (checkbox, dropdown, etc.) It provides a little usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.

<del> and <ins>

These maybe aren't the most useful tags on the list, but you can use these to make edits apparent in your page. Browsers will strikethrough deleted text and underline inserted text.

My favorite color is <del>blue</del> <ins>red</ins>!
becomes:
My favorite color is blue red!

<sub> and <sup>

Use these to define _subscript and ^superscript text.

<address>

Wrap your mailing or physical address in this tag.

Wrapping up, here are a bunch more, I'm not sure what exactly all of them are useful for, but you should know about them anyway.

<em> Renders as emphasized text
<strong> Renders as strong emphasized text
<dfn> Defines a definition term
<code> Defines computer code text
<samp> Defines sample computer code
<kbd> Defines keyboard text
<var> Defines a variable part of a text
<cite> Defines a citation
<q> Defines a short quotation
<blockquote> Defines a long quotation
<caption> Defines a table caption
<dir> Used to list directory titles
<pre> Defines preformatted text
<big> Renders as bigger text
<small> Renders as smaller text

Read more about all these for yourself at W3C's reference here: http://www.w3schools.com/TAGS/default.asp