HTML5 quote attribution

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 <cite> element, providing the following code example…

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

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

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

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:

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

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 <small> 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

Standing desk

I’m pretty sure that most of my back pain stem from being over 6’2″ tall. Most desks / chairs aren’t really designed for people my size and as I spend the vast majority of my waking hours sat working at a desk this can lead to real problems.

When I had the luxury of being in the employ of a company that cared about these sorts of things, I made it my business to ensure that I had a chair that suited my height, I had some nice desk raisers purchased on my behalf and my screen and laptop sat on their own adjustable stands. All of this not only helped me to achieve good posture so that I could avoid the headaches and back aches that might otherwise have made my working life very uncomfortable, it also drummed into me the guidelines for good ‘workstation ergonomics’. I won’t bore off with those here, but there’s a wonderful image on Wikipedia.

Since going the route of the freelancer and working mostly out of a home office, I’ve found myself without the luxury of an office supplies catalogue, a bank account with thousands of pounds in it and a health and safety representative to badger for this sort of thing. As such, there were old-outdated computer manuals under my screen and a 24 pack of Tesco value cola under my keyboard &  mouse mat. This all seemed to work quite well, and I have been comfortably working with this arrangement for a couple of years.

just lately I have started to become a little sick and tired of sitting down all the time. I sit down to work. I sit down to relax. I sit down on the train or in the car on the way to a meeting. I sit down when having dinner or lunch and then, finally, I lay down to go to sleep at the end of the day…

Sedentary lifestyle, you say? Exactly.

I first heard of the (now becoming very fashionable) concept of a standing desk when listening to Build and Analyze episode 21 , but it wasn’t until I read 5 Ways to Stay Healthy As A Freelancer on that I decided that it might be time to try it out. I think it was while mulling over the paragraph…

If you’re particularly ambitious, you might also want to look into a standing desk. Research has shown that people who stand on their jobs live longer than those who sit.

…that something finally snapped and I grabbed my old tea-chest bass and a wooden shelving unit and away I went…

Will update a fresh blog post with how it’s going very soon!

If you’re interested How and Why I Switched To A Standing Desk is an interesting read on the subject.

Protect your time

Writing every day – that’s what you’re supposed to do. it doesn’t matter what you write about as long as you just write something.

I’m doing my best with it. I’ve actually managed to take a break from motoring through the 3 web dev projects that I have to finish before Christmas and sit here, drink a big Sports Direct mug of coffee and write a few paragraphs.

That’s right – 3 projects to finish before Christmas. I’m not quite sure how I let myself fall back into the deadline hole again, but it’s certainly not a nice place to be at 3:30 AM.

The problem with being in the deadline hole is not the volume of work that has to be done, but the incredible mood swings it brings out in me as I stomp around the house and generally be obnoxious to my family. I complain of perpetual headaches, yet guzzle through a jar of coffee every two days. I complain of being tired but sleep for 3 hours a night. I complain about the constant interruptions but don’t get up and go and work in the office, choosing to stay at home to ‘get more done’.

I’m going to go on record officially that New Years Resolution number 1 is going to be getting back on the productivity wagon. My pseudo GTD/Pomodoro technique works well, but I’ll also be putting into place some pomodoro sized units of time into my diary and booking everything out again.

Another web dev friend mentioned that he holds me up as a good example of time management while freelancing when talking to other young freelancers, and that’s because he only sees the highly organised side that I pretend to the outside world is always going on back here. When he told me this, it made me realise that it was probably the best way to be.

Rambling on, I think the point that needs to be made is that you should Protect your time. It’s your only real commodity, and everyone is out to get it. Seriously – protect it with your life.

CSS quotes and the content property

If there’s one thing I enjoy more than learning new stuff, it is learning new stuff about something that I thought I had boxed off already. The CSS2 ‘quotes’ property pretty much fits that bill.

Here’s the rub if (like me) this is a property that you’re unfamiliar with:

Major browsers will prepend and append quotation marks to the `<q>` element via the CSS ::before and ::after pseudo-elements. This is pre-programmed into the user-agent style sheet, and a quick inspection via Firebug or whichever dev tools you prefer will reveal the following…

q::before {
q::after {

I frequently use the ::before and ::after pseudo-elements to help keep my HTML light when marking up some of the more elaborate designs that are passed my way, normally using ASCII or text strings in the content property. This is the first time (as far as I can recall) that I’ve come across the use of what is essentially a predefined variable within the CSS language. The variable itself is pre-defined by the user-agent (you’ll notice that Firefox uses slightly different ‘open-quote’ and ‘close-quote’ symbols to Safari / Chrome.

Should you wish to override the browser default, you can do so either by changing the ‘content’ property of each individual ::before and ::after declaration, or you can use the ‘quotes’ property of the ‘parent’ (? I’m not sure that this is the correct term ?) element.

The quotes property

The specification for the quotes property goes into great detail on how this may be used to employ different symbols across different languages or different levels of nested quotes, but the basic use would be to declare the ‘open-quote’ value and the ‘close-quote’ value, separated by spaces, as the value of the ‘quotes’ property as follows:

q {
quotes: ‘“’ ‘”’;

Whichever values you define will be used in place of the User-Agent defined symbols throughout your document.

Taking it a little further

This technique does not only have to be applied to <q> elements. It appears that any element can take a ‘quotes’ property, which can subsequently be called in its own ::before or ::after pseudo-elements.

For example, consider the following, using CSS3 attribute selectors :

quotes: ‘As I have said on my weblog: “’ ‘”’;
[cite^=""]::before {
content: open-quote;

What we are doing here is prepending any element with the ‘cite’ attribute starting with ‘’ – i.e. anything that cites this blog as its source – with an ‘open-quote’ value of ‘As I have said on my weblog: “’.

By writing this CSS rule without an element selector, it automatically applies to any element with a matching ‘cite’ attribute – so will also include <blockquote> elements. If we only wanted to match q elements, then we likely wouldn’t need the ::before declaration, because this would already be defined in the user-agent style sheet. Do note that while the ‘cite’ attribute is only valid on a <q> or <blockquote> element, the CSS rules here would also apply to any other element matching the rule.

Taking it a little too far?

It occurs to me that being able to predefine these ::before and ::after content strings could be used outside of the context of quotes, and leant on for use in some elaborate CSS, enabling an element of DRY programming in CSS. The problem is that it feels just a little bit dirty to me to do so at this point. I intend to explore the ‘content’ property further before drawing any conclusions, as there are other possible values that it can take outside of ‘open-quote’, ‘close-quote’ and strings – including the intriguing ‘attr(X)’ – any of which could turn out to be extremely useful to this end.


I’m perfectly happy to accept that I’m not much of a writer. I’m also perfectly happy to accept that auto-feeding all my Twitter status updates into my blog was probably a bad idea and the reason that I stopped updating it.

Rewind a second… Who am I trying to kid there? the reason that I stopped updating is because I didn’t have the time any more. Work became super-busy (which is nice) and Laura-Jane severely injured her back (which isn’t nice) leaving me pretty much on sole parenting duty for a few months over the summer. Anything that didn’t involve a two-year old or earning money to pay the bills pretty much went on hold. Networking, studying, the podcast, the videos, exercise, socialising – everything.

That’s not really the issue. Now Laura’s back is almost better, the problem is that I am still keeping everything else on hold. I find myself working whenever possible out of habit more than anything else, telling myself that everything else will have to wait until I don’t have any work to do.

Here’s the rub – I’m a freelancer. If I don’t have any work to do then that’s a pretty serious problem. To put it in context; I keep a running to do list, the last item of which is ‘get a job or sign on’ – this keeps it clear in my mind that being busy and having lots on is not just a good thing, but the permanent state that I should be aiming for. Therefore it follows that I just have to make the time for all the other stuff that I want / need to be doing. Either that or rule it out altogether.

I make time for my son. I can do that. The phone goes off, the inbox builds up and we play or go swimming or read stories or any number of other things. I need to make time the same to study. To exercise. To write. To record. I can do that too.

So this is me, making the mental decision to do so on the side of Christmas where it actually means something. I look forward to still being here in 12 months…