You are here: Home > What's New > Marking Up and Styling Abbreviations

Marking Up and Styling Abbreviations

For accessibility reasons abbreviations should be marked up using the xhtml <abbr> element, and its title attribute should contain the non-abbreviated form. For example, here's how to markup the abbreviation xml:

    <abbr title="Extensible Markup Language">XML</abbr>

"For abbreviations and acronyms in the midst of normal text, use spaced small caps." [The Elements of Typographical Style by Robert Bringhurst, section 3.2.2, page 48.]

Here is the abbrevation XML in the midst of normal text, unstyled.

Here is the abbreviation xml in the midst of normal text, styled in smallcaps and with a little extra spacing between letters.

Here's the markup to accomplish the latter:

    <abbr class="abbrevInNormalText" title="Extensible Markup Language">xml</abbr>

Please note the use of lowercase letters for the abbreviation. The reason is that the css smallcaps value only applies to lowercase letters.

Here is the css styling:

    .abbrInNormalText {
        font-variant: small-caps; 
        letter-spacing: 0.1em;
    }

Last Updated: October 5, 2008