HTML: The Top 5 Forgotten Elements

So you’re a front-end guru who spends your day churning out complex CSS layouts and dynamic DOM wizardry. You’ve mastered cross-browser layouts, you’re confident with your DOM scripting skills, and you’ve made every effort to make your pages as usable and accessible as possible. Heck, maybe you’ve even added extra semantic meaning to your site using microformats.

But is there more you could be doing? Just how polished are those HTML foundations upon which everything rests?

Before you declare your tasty web standards trifle ready to be served, have a read through the following five elements that may have slipped off your radar. They’re supported by all major browsers, and implementing them is easy to do and takes almost no time at all.

dfn

The dfn element is used to introduce a term to your readers. Here’s an example:

<p>An <dfn>array</dfn> is a single programming variable with
multiple "compartments". Each compartment can hold a value.</p>

The browser default is to render dfn elements in italics, but of course through the power of CSS you can make them look any old way you like. For example, if I wanted them to display in bold, instead, I could do this:

dfn {
  font-weight: bold;
  font-style: normal;
}

cite

The cite element is for marking up citations, for example to a magazine, book or web site. Here’s how you use it:

<p>The SitePoint book <cite>Build Your Own Web Site The Right 
Way</cite>, by Ian Lloyd, is a great primer for learning 
<acronym title="HyperText Markup Language">HTML</acronym> and 
<acronym title="Cascading Style Sheets">CSS</acronym>.</p>

The most common reason the cite element is forgotten is because it feels more natural to link to the document in question — be that a web page, or possibly a sales page for the book you are citing. That’s fine! You can do both, like this:

<p>The SitePoint book <a 
href="https://www.sitepoint.com/books/html1/"><cite>Build Your 
Own Web Site The Right Way</cite></a>, by Ian Lloyd, is a great 
primer for learning <acronym title="HyperText Markup Language">HTML</acronym> and 
<acronym title="Cascading Style Sheets">CSS</acronym>.</p>

var

The var element can be used to mark up a variable, when talking about programming code. By default it renders in a monospace font in most browsers. Here’s an example:

<p>For each iteration in the following Ruby code, the 
<var>car</var> variable is set to the current element of 
the array.</p>

samp

The samp element is used to mark up sample output, such as the output to your screen when running a script. Here’s how it’s used:

<p>When I ran the program from the command line, it just 
printed <samp>File Not Found</samp> to the screen.</p>

kbd

The kbd element should be used to indicate keyboard input required by the user. Pretty straightforward:

<p>If you need help at any time, hit <kbd>F1</kbd> to display 
the online help menu.</p>

And that’s all there is to it. Easy, huh?

While you may be thinking that the rewards for going to this level of detail are not justified by the effort required, remember there are lots of reasons why adding semantic meaning to your page makes lots of sense.

• Your pages will automatically become (potentially) more accessible, as assistive technologies will have more meta data about your page when interpreting its contents.
• You may see some improvement in SEO rankings, as search engine bots will be able to make more sense of the content on your page.
• You will be in a better position than most to take advantage of an appropriate microformat, should it come along (or the Semantic Web, should such a thing ever eventuate).

Including these forgotten elements in your markup is quick and easy to do, and adds an extra dimension of semantic richness to your page.