I often come across the situation when working on a client site where I need to mark up a  soundbite. Usually a client testimonial or similar in some kind of business site. The problem I find is that these sorts of testimonial quotes all come complete with their own source references and I’ve struggled to find a nice way to mark up this associated data. Usually a name, sometimes a company, sometimes even a company URL are provided. At first glance one might think that the ‘cite’ attribute of our element is an appropriate method, as the spec is clear that the…

Content inside a q element must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.

Sounds great, but the spec continues that..

If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents should allow users to follow such citation links.

Quite clearly inappropriate, intended to reference the source document from which a quote has been lifted. It doesn’t really apply in our use case of recounting a spoken quote as a testimonial or similar. Especially when the only attribution that we might have is the name of a person. HTML4 gave us the perfect solution in the element, providing the following code example…

As <cite>Harry S. Truman</cite> said,
<q lang="en-us">The buck stops here.</q>

Unfortunately the current HTML5 Working draft lays a big log in our custard by specifically stating that…

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.

A person’s name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people’s names.

The best option it can offer us is the <b> tag or a <span> element, but isn’t really clear as to the best practice – almost hinting that these sorts of attributions shouldn’t be used at all.

Looking back at one of my recent projects, I can see that I chose to use the following markup, which on reflection may also not have been the best solution but provides a level of semantics otherwise not provided

<q>
They helped me find a great way of marking up testimonial quotes
<span class="author">A.N. Other</span>
</q>

A possible solution – the small element

When reading the HTML5 recommendation for the element we find the following paragraph…

Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.

…which seems to have slipped under the radar up until now. Maybe I am reading too much into it, but the clause Small print is also sometimes used for attribution implies that the best way to mark up the above would be as follows:

<q>
They helped me find a great way of marking up testimonial quotes
<small class="author">A.N. Other</small>
</q>

It works for me, but can’t help thinking that I’ve missed something or am making a bit of a leap. Otherwise why wouldn’t the W3C list the element among those that could be used for this purpose?

Maybe I need to think this out a bit more, although what’s more likely is that I should maybe think about it a bit less…