<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>code · How to Use `&lt;abbr&gt;` in HTML5, _and_ in General</title>
<link rel="stylesheet" type="text/css" href="/design/design.css" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="alternate" type="application/rss+xml" href="/code/rss" title="Just code" />
<link rel="canonical" href="/code/using-abbr" />
<!-- =================================================================================================================== -->
<header>
	<h1><a href="/" rel="index">
		Camen Design
	</a></h1>
	<nav><ul>
		<li><a href="/">all</a></li>
		<li><a href="/projects">projects</a></li>
		<li><a href="http://forum.camendesign.com">forum</a></li>
	</ul><ul>
		<li><a href="/quote/">quote</a></li>
		<li><a href="/writing/">writing</a></li>
		<li><a href="/blog/">blog</a></li>
		<li><a href="/photo/">photo</a></li>
		<li><a href="/code/" rel="tag">code</a></li>
		<li><a href="/art/">art</a></li>
		<li><a href="/link/">link</a></li>
		<li><a href="/poem/">poem</a></li>
		<li><a href="/audio/">audio</a></li>
	</ul><ul>
		<li><a href="/web-dev/">web-dev</a></li>
		<li><a href="/annoyances/">annoyances</a></li>
		<li><a href="/eve/">eve</a></li>
		<li><a href="/code-is-art/">code-is-art</a></li>
		<li><a href="/inspiration/">inspiration</a></li>
		<li><a href="/windows/">windows</a></li>
		<li><a href="/gift/">gift</a></li>
		<li><a href="/gaming/">gaming</a></li>
		<li><a href="/mac/">mac</a></li>
		<li><a href="/osnews/">osnews</a></li>
		<li><a href="/c64/">c64</a></li>
		<li><a href="/linux/">linux</a></li>
	</ul>
	<a rel="previous" href="/code/uth5_new-website-ish">
		older article →
	</a><a rel="next" href="/code/how_to_learn_html5">
		← newer article
	</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
	<!-- date published or updated -->
	<time pubdate datetime="2008-10-01T11:26:00+01:00">
		<sup>11:26<abbr>am</abbr> • 2008</sup>
		<abbr title="October">Oct</abbr> 1
	</time>
	<!-- categories -->
	<ul>
		<li><a href="/code/using-abbr" rel="bookmark tag">code</a></li>
		<li><a href="/code-is-art/using-abbr">code-is-art</a></li>
		<li><a href="/web-dev/using-abbr">web-dev</a></li>
	</ul>
	<!-- licence -->
	<small>
		<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_GB">c</a>
		share + remix
	</small>
</header>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<section>
<h1>How to Use <abbr title="The “abbr” Element"><code>&lt;abbr&gt;</code></abbr> in HTML5, <em>and</em> in General</h1>
<p>
	<strong>Warning:</strong> This article is now obsolete, please read the new article
	<a href="/code/abbr_redux">Abbreviations, Definitions &amp; Citations Revisited</a>.
</p>

<hr />

<p>
	<strong>Before I begin</strong>, I should profess that I am completely accountable for having never followed any of
	these rules in the past. However, the whole reason for writing this article was to solve that problem. Since moving
	to my <a href="/code/uth5_new-website-ish">new website back-end</a>, I decided to go through the entire site’s
	contents with a fine brush and polish all of the code.
</p><p>
	In doing that, I discovered how vague I was on the semantics of the <code>abbr</code> element, and working through
	all the test-cases that have sprung up in the wealth of HTML I’ve written for this site, I’ve documented here my
	new understanding of the often-abused <code>abbr</code> element.
</p>


<h2 id="abbr-not">Ⅰ. Abbreviations <em>Are Not</em> Dictionary Definitions</h2>
<p>
	Let’s first define <q>abbreviation</q> clearly:
</p>
<blockquote>
	<p>
		An abbreviation is where you have shortened one or more words into:<br />
		either one word, or an alternative phrase or acronym
	</p>
	<cite>Kroc Camen</cite>
</blockquote>
<p>
	The problem with the use of <abbr title="the “abbr” element"><code>&lt;abbr&gt;</code></abbr> so far, has been
	that developers have assumed that every abbreviation and acronym has had to be defined in full. This is incorrect.
</p>

<pre><code>BAD:	I made some &lt;abbr title="American Standard Code for Information Interchange"&gt;ASCII&lt;/abbr&gt; art.</code></pre>

<p>
	An <code>abbr</code> element expands its contents into the desired spoken form. When you read a document, you
	naturally expand the abbreviations as appropriate in your mind.
</p>

<pre><code>GOOD:	Red &lt;abbr title="versus"&gt;vs.&lt;/abbr&gt; Blue</code></pre>

<p>
	You would not read out aloud the abbreviated “et cetera” in “Granny went to the market and bought apples,
	bread &amp; milk etc.” as <em>“eee-tee-see”</em>? So as it should be with HTML abbreviations. Here are some
	examples:
</p>

<pre><code>BAD:	My &lt;abbr title="Cascading Style Sheets"&gt;CSS&lt;/abbr&gt; is tweaked almost daily.
GOOD:	My &lt;abbr title="style sheet"&gt;CSS&lt;/abbr&gt; is tweaked almost daily.</code></pre>

<p>
	Here we’ve used the <code>abbr</code> element to span over an abbreviation and provide an alternative, natural
	way of reading the abbreviation.
</p>

<pre><code>GOOD:	price &lt;abbr title="does not equal"&gt;!=&lt;/abbr&gt; &lt;abbr title="total cost of ownership"&gt;TCO&lt;/abbr&gt;</code></pre>

<p>
	We have adapted something unpronounceable as letters into something perfectly readable.
</p><p>
	In general, abbreviations should maintain the grammar. Whilst not necessary, this example demonstrates how
	grammatical flow can be improved, whilst also expanding a Latin abbreviation:
</p>

<pre><code>Along the way, open-source has forgotten what it really means (&lt;abbr title="that is,"&gt;i.e.&lt;/abbr&gt; in real life) to give.</code></pre>

<p>
	Try and communicate your intentions. If you would personally read something one-way, define the abbreviation how you
	intend it to be read:
</p>

<pre><code>Switch to using the &lt;abbr title="“wizzy-wig”"&gt;WYSIWYG&lt;/abbr&gt; editor, instead.</code></pre>

<p>
	In the example below however, there’s an abbreviation <q>CDs</q> inside the abbreviation title:
</p>

<pre><code>&lt;abbr title="recordable CDs"&gt;CD-Rs&lt;/abbr&gt; and &lt;abbr title="recordable DVDs"&gt;DVD±Rs&lt;/abbr&gt; are susceptible to literal bit-rot.</code></pre>

<p>
	Isn’t this wrong? No, because remember that the point of abbreviations are to expand one phrase into another. The
	user is assumed to already know what a CD is, it doesn’t have to be spelt out for them.<br />
	<br />
	This follows neatly into the next point: when and where to expand abbreviations at all…
</p>


<h2 id="abbr-title">Ⅱ. the <code>title</code> Attribute Is <em>Optional</em></h2>
<p>
	Oh man, this is so important. The misuse of the <code>abbr</code> element is because almost everybody is under the
	assumption that <code>abbr</code> elements <em>must</em> have a <code>title</code> attribute, in fact— it’d
	seem pointless otherwise!
</p>
<blockquote>
	<p>
		Your users do not need to know the definition of every single acronym and abbreviated technical term. In
		fact, they don’t care. They don’t have to know what the <q>V</q> in DVD stands for if they know a DVD
		when they see one.
	</p><p>
		Only title abbreviations that you expect people to read as the expanded form in their mind, or out aloud.
	</p>
	<cite>Kroc Camen</cite>
</blockquote>
<p>
	An <code>abbr</code> element <em>without</em> a <code>title</code> attribute should be used on any abbreviation /
	acronym that is written in all-capitals (unless you are providing a spoken alternative, like the <q>WYSIWYG</q>
	example from earlier), to communicate that the abbreviation is either unpronounceable as a word, or that it is
	capitalised—not for emphasis—but because each letter has an individual meaning.
	<abbr title="For example,">E.g.</abbr>
</p>

<pre><code>The &lt;abbr&gt;FBI&lt;/abbr&gt; are like the British &lt;abbr&gt;MI5&lt;/abbr&gt;.</code></pre>


<h2 id="abbr-cite">Ⅲ. Citations <em>Are Not</em> Abbreviations</h2>
<p>
	This one is very sneaky and can easily catch you out.
</p>

<pre><code>BAD:	The site will be built using &lt;abbr title="Hypertext Pre-Processor"&gt;PHP&lt;/abbr&gt;.</code></pre>

<p>
	Firstly, this reads wrong; the abbreviation breaks the grammar. Secondly, remember that abbreviations are to
	communicate how things should be read, not to define terms.
</p><p>
	But thirdly, it is not an abbreviation. It is not a section of the document that has been shortened or re-phrased by
	the author to fit their chosen grammar. It is not a personal rendering of words. The sentence is referring to a
	software product. This is a
	<a href="http://www.whatwg.org/specs/web-apps/current-work/#the-cite" rel="external">citation</a>.
</p>

<pre><code>GOOD:	The site will be built using &lt;cite&gt;PHP&lt;/cite&gt;.</code></pre>

<p>
	Even though a cited name can be an abbreviation of something else, the name seals that abbreviation and turns that
	name into a real word of sorts (a brand). Names that are already made from an abbreviation, can then even be
	abbreviated! (since they behave as normal words) For example “Mac OS X” is already an abbreviation of
	“Macintosh Operating System version Ten”, and people then often abbreviate further, calling it “OS X” or by
	referring to the version number / name “10.5 / Leopard”.
</p>


<h3 id="abbr-cite-what">What Counts as a Citation?</h3>
<p>
	A citation represents the title of a work, where you are referring to it in the context of your sentence, or in
	passing. A work is defined as an intellectual human creation.
</p><p>
	A work can be a <em>book</em>, a <em>poem</em>, a published piece of <em>writing</em>, a <em>piece of art</em>, a
	<em>website</em>, a <em>song</em>, a <em>film</em>, a <em>TV show</em>, a <em>game</em>
	<abbr title="et cetera">&amp;c.</abbr> and also <em>software</em>.
</p><p>
	However this does not include the following: <em>people’s names</em>, the name of a <em>ship</em> or real products
	in general; such as a <em>packet of crisps</em>, a <em>stereo</em> or <em>computer hardware</em>.
</p>


<h3 id="abbr-cite-except">There Are Exceptions</h3>
<p>
	I won’t go into details, but there are exceptions here and there, that mostly lie around the context; whereby you
	are either referring to the citation itself, or the use of that work in a specific case - particularly with broadly
	used technologies like HTML, CSS and PHP.
</p>

<pre><code>I am referring directly to the &lt;cite&gt;PHP&lt;/cite&gt; language/technology.
My website’s &lt;abbr&gt;PHP&lt;/abbr&gt; is small.</code></pre>

<p>
	That said, details like this will boil down to personal taste, and it’ll never really hurt to just stick to using
	one element or the other for all such instances, regardless.
</p>


<h2 id="abbr-meek">Ⅳ. Abbreviations Should Be Meek</h2>
<p>
	An abbreviation is merely anything that is read different from how it is written and vice-versa. It does not need to
	be in your face, Javascript-powered, “intelli-text”.
</p>


<h3 id="abbr-unknown">What if the Reader Does Not Know What a Technical Abbreviation / Acronym Means?</h3>
<p>
	Isn’t the point of an <code>abbr</code> element so that these technical terms can be defined by hovering the
	mouse over the term?<br />
	<br />
	There’s two valid answers to this:
</p>
<ol>
	<li>That’s what the
	<a href="http://www.whatwg.org/specs/web-apps/current-work/#the-dfn" rel="external"><abbr title="definition"><code>&lt;dfn&gt;</code></abbr>
	element</a> is for, and…</li>
	<li>It is not your responsibility to be an encyclopædia.<br />
	Being paranoid about your reader’s abilities is just going to make your life difficult</li>
</ol>
<blockquote>
	<p>
		You, the author, only have to take the responsibility to know your audience and define those terms which
		you think they won’t know, or that you may be newly introducing to them.
	</p>
	<cite>Kroc Camen</cite>
</blockquote>
<p>
	If a user does not know a term, your website is not the only resource in existence where they can then find the
	definition! The user can easily google the term. In many browsers they can just right-click the word and choose to
	search the ’Web for it. On a Mac, there’s a system-wide integrated dictionary you can access in a number of
	ways. There is no end to the ways a user can find out what a term means if they need to.
</p>


<h3 id="abbr-style">How to Style Your Abbreviations</h3>
<p>
	The traditional way to style abbreviations is a grey dotted line, like so:
</p>

<pre><code>abbr	{border-bottom: 1px solid #666;}</code></pre>

<p>
	However, this was under the previous model of using <code>abbr</code> as some kind of inline dictionary.
	Abbreviations are for the benefit of screen readers, search engines and enthusiasts like me. Generally,
	abbreviations shouldn’t be styled at all.
</p><p>
	That said, abbreviations still do provide a useful service by allowing readers to uncover how something should be
	read. We need a subtle approach that doesn’t fill the user’s screen with grey dotted lines, but at the same time
	does allow them to discover where you’ve provided reading “hints”.
</p><p>
	The method I’m using is to only show the grey-dotted underline when the user’s mouse is within the paragraph
	containing the abbreviations, so that when the user moves their mouse into the surrounding text, the abbreviations
	(with titles) will be marked, and the user can hover over them to then see the tooltip.
</p>

<pre><code>*:hover&gt;abbr[title]	{border-bottom: 1px dotted #666; cursor: help;}</code></pre>

<p>
	<small>Update: The above code only works with abbreviations directly within paragraphs, if the <code>abbr</code>
	element is wrapped in a link or any other kind of tag, the grey dotted line won’t appear until you hover directly
	over it. The new CSS below fixes this:<br />
	(where <q><code>section</code></q> is the element/ID containing your blog posts)</small>
</p>

<pre><code>/* first, the immediate descendants of the content area are set to highlight abbreviations on hover, but avoiding lists; as I don’t want *all* abbreviations highlighted when you hover on a root list… */
section&gt;*:not(ol):not(ul):not(dl):hover abbr[title],
/* …only when hovering on each list-item */
 p:hover abbr[title], li:hover abbr[title], dl&gt;*:hover abbr[title] {
	border-bottom: 1px dotted #666; cursor: help;
}</code></pre>


<hr />

<p>
	<strong>I hope</strong> this article provides with some practical guidance and enthusiasm.
</p><p>
	If you spot any flaws in the HTML of my articles, please do contact me and let me know, I’ve got so many thousands
	of lines I’m sure to have made mistakes everywhere. Also you’re free to
	<a href="mailto:kroc@camendesign.com">e-mail me</a> if you’ve any questions about this article and using
	<code>abbr</code>, <code>cite</code> and HTML5 in general.
</p><p>
	Special thanks goes to Adam of <a href="http://firsttube.com" rel="external">firsttube.com</a> for reviewing the
	article whilst it was being prepared and spotting a number of flaws.
</p>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</article>
<footer>
	<nav><a href="http://forum.camendesign.com">‹ Discuss this in the Forum ›</a></nav>
		
	<a href="mailto:kroc@camendesign.com">kroc@camendesign.com</a>
	<nav>view-source:
		<a href="/code/using-abbr.rem">Rem</a> •
		<a href="/code/using-abbr.html">HTML</a> •
		<a href="/design/">CSS</a> •
		<a href="/.system/">PHP</a> •
		<a href="/.htaccess">.htaccess</a>
	</nav>
	<form method="get" action="https://duckduckgo.com">
		<input type="hidden" name="sites" value="camendesign.com" />
		<input type="search" name="q" placeholder="search…" />
		<input type="submit" value="Go" />
	</form>
</footer>
<!-- =================================================================================================== code is art === -->