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.