HTML: The Top 5 Forgotten Elements

Matthew Magain

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="http://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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • plaatspunt

    var is used to mark up a variable, or replaceable, part of some text.
    (…)A common misconception is that var should be used for marking up variables in programming code samples.

    from http://www.sitepoint.com/article/html-37-steps-perfect-markup/2

  • http://www.sitepoint.com Matthew Magain

    @plaatspunt: Interesting, and good spot. The wording used in the W3C HTML 4 spec is:

    Indicates an instance of a variable or program argument.

    which I’m sure you’ll agree is pretty ambiguous. I certainly wouldn’t want to go head to head with Tommy over semantics, but if it is indeed intended only for replaceable text, then the spec could certainly do with some clarification!

  • Noman

    nice .. but is there any proof that search engine treat this tags in differant way? I doubt so

  • http://www.sitepoint.com Matthew Magain

    @Noman: I don’t know, but even if they don’t, what’s to say that they won’t in the future? Who knows exactly what criteria Google Code Search uses to rank its results, much less the web crawler?

    As I mentioned, a potential SEO gain is only one of a number of reasons for why one might consider using HTML to its fullest.

  • Tyssen

    I don’t believe the example you’ve given for cite is correct. Nearly all dictionary references to cite/citation also mention the act of quoting the source and my view is that a citation or quote is a passage that augments a point you’re making about something else. (The W3C’s examples all involve cite being used in combination with the q element too.) In the example you’ve given, the point you’re making is about the same source you’re citing and there’s no quotation involved.

  • Samuli K

    HTML 4 specs say for KBD: “Indicates _text_ to be entered by the user.” but the “F1″ above is a key and not text, so could this confuse the users? :-)

  • http://blog.heuristicdesign.co.uk Hal9k

    For more on the topic, have a look at an excellent presentation by Tantek Celik.

  • http://www.gd-studio.com/ logic_earth

    @Samuli K:
    Hitting a key can be considered keyboard input if it performs some action on screen. I say telling the user to press F1 using is valid.

  • http://www.brothercake.com/ brothercake

    Citations are not just for books and articles themselves — any reference to an external information source is a citation; so in your example, “Ian Lloyd” could also be wrapped in <cite>

    And if a citation is also a link, why not use both: <a>…

  • http://www.brothercake.com/ brothercake

    btw – I’d also dispense with <acronym>. All acronyms are abbreviations, but all abbreviations are not necessarily acronyms, and there are edge cases – like “PNG”, which is “P.N.G” to some (and hence, an acronym), but “ping” to others (and hence, not an acronym, by the spec’s definition)

    So it’s easier and more consistent just to dispense with <acronym> altogether, and use <abbr> for everything.

  • Anonymous

    I’m having a little trouble with dfn being called semantic. Can somebody explain it to me?

    We already have the definition list, which I’m currently in love with, which explicitly associates a definition term with it’s description. With tags like the acronym or abbreviation, we can add a title to calrify the term. Even with input fields on a form, we have the label to explicitly bind the text to the control.

    But where is the ‘semantic’ relationship between the dfn, which identifies a term, and the definition of that term? We can only *assume* that the nearby text is relevant to the defined term. Does that make it semantic?

  • http://www.splintered.co.uk redux

    Your pages will automatically become more accessible, as assistive technologies will have more meta data about your page when interpreting its contents.

    i’d temper this statement a tad, as it depends on AT support. so..you’re making your pages *potentially* more accessible. whether or not, at this stage, the effect is actually noticeable by AT users is arguable.

    related to this, people may be interested in my little dreamweaver extension to add a few more buttons (including one for DFN) to their toolbar http://www.splintered.co.uk/experiments/88/

  • Anonymous

    Good, would have been nice to actually see an example of them in action rather than just the code?!

  • http://www.sitepoint.com Matthew Magain

    @Anonymous (#11): You are correct that a definition list provides more semantic information, given that the term’s definition is more explicitly marked up. But that doesn’t mean that the dfn term doesn’t have a place. If I’m composing a list of terms and their definitions, then I’ll use a dl. But if I’m writing a book which is composed of, you know, paragraphs of sentences (not lists), then I shouldn’t have to change the format of my prose. If I want to introduce a term in the middle of a sentence, it’s my prerogative, and the dfn fits perfectly for that.

    In SitePoint books, we use the convention that terms that are introduced to the reader for the first time are marked up in bold. But marking up this term using strong makes no sense; dfn, on the other hand, is made for it.

  • http://www.sitepoint.com Matthew Magain

    @redux:

    i’d temper this statement a tad, as it depends on AT support

    Agreed, thanks Patrick.

  • http://autisticcuckoo.net/ AutisticCuckoo

    The explanation of VAR in the HTML 4.01 specification is ambiguous, and it’s no wonder people misunderstand it. But if you remember the origins of HTML — a markup language for scientific documents, mainly — it’s a bit more clear. It’s meant for placeholders: something in an example that will be subsituted by actual data when used. The default rendering (italic) indicates this, since it’s a long-standing typographic convention to italicise such placeholders.

    It has nothing to do with variables in programming language code. You don’t normally italicise them, do you?

    I’m having a little trouble with dfn being called semantic. Can somebody explain it to me?

    DFN does not mark up a definition. It marks up the defining instance of a term. Again, this is to conform with a typographic convention used (primarily) in scientific documents. The first occurrence of an important term is italicised.

  • http://www.sitepoint.com Matthew Magain

    To play devil’s advocate a little: if the creators of IE 5 got the box model wrong, what’s to say that browser creators didn’t misinterpret how var should be rendered? They were no doubt working from the same (ambiguously worded) spec…

  • Samuli K

    @logic_earth: I know, I know… I was just splitting hairs over the wording in the spec :-) Hitting F1 is using the keyboard, yes, but is it “_text_ entered by the user”? :-) The spec text might read instead “indicates keyboard input”, for example.

  • Manuel

    i’m missing label in your posting. it’s still rarely used although it’s more than useful.

  • http://blog.heuristicdesign.co.uk Hal9k

    So it’s easier and more consistent just to dispense with altogether, and use for everything.

    Internet Explorer always be easier.

  • http://blog.heuristicdesign.co.uk Hal9k

    My comment got mashed up; that’s probably the only time you’ll ever hear me say that!

    So it’s easier and more consistent just to dispense with altogether, and use abbr for everything.

    What I was meaning to say is that Internet Explorer <= 6 (not sure about 7) doesn’t support the abbr tag by default, so it may not always be easier.

  • http://autisticcuckoo.net/ AutisticCuckoo

    To play devil’s advocate a little: if the creators of IE 5 got the box model wrong, what’s to say that browser creators didn’t misinterpret how var should be rendered?

    Microsoft used the wrong box model from the start (IE3). My guess is that they implemented an early draft of the spec — they’re W3C members, after all — and the spec changed before it became an official recommendation.

    If var was meant for variables in code samples, wouldn’t there be element types for class, function, constant, etc.?

    I remember some examples of how var was meant to be used, and it must have been from back in the days when the documentation was hosted on CERN’s domain. It was clearly meant as a placeholder, not for programming samples. On the other hand, perhaps I’m going senile and I just dreamt that. :)

  • mep00

    As presented above, the semantic value of <dfn> is somewhat limited. Its value can be easily increased with the addition of a title attribute containing a brief definition. It’s in this way that it really sets itself apart from the <dl>. Where the definition in a <dl> is proper content, with a <dfn> he definition is meta-content (somewhat like a parenthetical definition).

    The use of a title attribute is also recommended for <abbt> and <acronym>.

    Since most browsers display the title attribute as a tool tip, by adding an underline (or better yet, a dotted bottom border so as not to confuse it with a link) and help cursor in CSS, you draw the users attention to it and increase its value even more.

  • http://autisticcuckoo.net/ AutisticCuckoo

    As presented above, the semantic value of is somewhat limited. Its value can be easily increased with the addition of a title attribute containing a brief definition.

    That is not necessary, since dfn marks up the defining instance of the term, which should be accompanied by the definition in plain text.

    It is just a typographic convention, with little semantic value. It does not mark up a ‘definition’.

  • http://fiercestreetnetworks.com/ espmartin

    Hurray for semantics!

  • TMAN001

    People,
    What’s with the layout of this page. It’s unreadable on PC/IE6 unless you make your browser approx 2000 pixels wide (which on my machine means across 2 monitors). Any less than this and the LHS of the article text is cropped.

    For shame. This isn’t aol.com, it’s sitepoint.

  • http://www.sitepoint.com AlexW

    People,
    What’s with the layout of this page. It’s unreadable on PC/IE6 unless you make your browser approx 2000 pixels wide (which on my machine means across 2 monitors). Any less than this and the LHS of the article text is cropped.

    For shame. This isn’t aol.com, it’s sitepoint.

    It looks ok on my machine, but I’ll take your word for it, TMAN001. Is there anything unusual about your IE setup? — javascript disabled perhaps?

  • TMAN001

    Problem seems to be fixed now. No unusual setup. Cheers.

  • ResearchWizard

    Regarding acronyms and abbrehevations and brothercake’s comment: there are two definitions in the wild (both mentioned in the German Wikipedia, but not in the English one) :
    Acronyms could also be defined as read(able) alone as a whole word (like NATO), while abbrehevations always are spoken letter by letter (like U.S.A.). In technical sense the usage of this distinction could make it easier for screenreaders to have the correct articulation without having a long list of words that have to be spoken letter by letter. Well, I think this point is pretty irrelevant as long as most webcontent doesn’t provide any of this tags at all.