HTML5 Simplequiz #2: citing people

by .

A few years ago, Dan Cederholm published a series of articles called Simplequiz in which he posed some options for marking up a specified piece of content and invited readers to choose the one they felt was the best way to mark that up. The value was in the comments in which people said why they made that choice and debated the options (which means it is THE LAW that you read the preceeding comments before adding your own).

With Dan’s blessing, we’re running an occasional series of HTML5 Simplequizzes. And here’s the second, suggested by a reader named Alohci.

It’s easy to cite works in HTML and default browser stylesheets obey the typographic convention of showing the citation in italics:

<p><q>There was a young man from Nantucket</q> 
wrote John Keats in his <cite>Ode on a Grecian Urn</cite>.</p>

(Although if you also link to an online copy of the work, do you put the link inside the cite element, or the cite element inside the <a>? Oops, that’s another discussion.)

But how do you mark up the author of the work cited — in this case, the text “John Keats”?

Choose from the answers below please. Make sure you show your working out.

A:

<b>John Keats</b>

B:

<i>John Keats</i>

C:

<cite>John Keats</cite>

D:

<span style="font-style:italic">John Keats</span> 
(eg, no semantic element available)

E:

none of the above, and I shall leave a comment to tell you why each of the above is entirely preposterous

Your answers below, please, with your rationale. I’ll wade in on Thursday 14th October.

Note: please DON’T USE ANGLE BRACKETS in your comments. Escape them with &lt; and &gt; or just use [foo] – we’ll know what you mean.

53 Responses on the article “HTML5 Simplequiz #2: citing people”

Dave Kinsella says

I’m going for E on this one.

I think <cite> is fine but id probably go for a microformat style of semantic class naming e.g.

<cite class=”author”>Author Name</cite>

on the subject of links to cited content; I’d put them inside the cite tag. This would allow for compound citations such as:

<cite>
<span class=”author”>Author Name</span> – <a href=”…” class=”url”>An article somewhere</a>
</cite>

Eric DeLabar says

I’m going to go with B, since the author should be in italic, and that’s what <i> does.

Daniel Davis says

I failed to win the glittering prize last time so here goes attempt two:

E.
There is no suitable element and inline styles (D) do not cut it. Instead, I think microformats/microdata are the most appropriate alternative, e.g. something like <p class=”vcard”> blah blah <span class=”fn”>John Keats</span> blah blah </p>

Phil Nash says

The cite element isn’t for people’s names, it’s for the title of a work.

Why do you want to mark up the author? If it is to show it with a different style, the [b] element is fine.

Jack Lawson says

E. A simple span with a class is good enough for the author (Does this count as D?)

I don’t believe microformats really make sense in this case (do you really need a vcard for an author, when all you have is first name?) and microdata feels like it gives awkward scope to the p (or extra markup to wrap all of this with an itemscoped parent element of some sort). I’m not convinced that the extra semantics in this specific case really provide the user, or a machine, with anything useful. While it may be tempting to use microdata and microformats everywhere, they should be used where they make sense.

Martijn van Turnhout says

I would go for B. C is definitely out of the question, because the author != the title of a work. [i] is mostly used for an alternate voice or mood, which isn’t really the case here. I think it should be [b]. The name of the author can be considered as a keyword in a document, without adding any more importance to the doc.

Check out http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html for more information.

Ian Parr says

A, B and D are all style instead of content. Naughty boy, bad boy! In your bed!

That leaves C, but doesn’t a <cite> need to be withing a <blockquote> ? That leaves E. Nice trap ;-)

Scott Reynen says

E. <i class=”vcard author”><span class=”fn”>John Keats</span></i>

This matches the proposed citation microformat.

Jack’s right that microformats are only good if they have use cases, but wrong that an author name has no use cases. A user agent that recognizes author names could perform relevant searches (e.g. works from the same author at a local library) with that information. In the context of a citation, the author’s name could help track down the original source in something like Google Books.

And Ian is wrong about B being purely style. It was in the past, but <i> has a new definition in HTML5, a semantic definition that works well for author names.

Erik V. says

Oh, Bruce, you’re giving me flashbacks.

Since you’re already citing the poem, I’d probably not use markup on the name, but I reserve the right to change my mind.

If, however, you hadn’t included the poem, then I would argue for using <cite> on the esteemed name of Mr. Keats. The HTML5 rule for this element is just plain silly.

Kevin Sweeney says

None of the above and here’s why:

Citing people is going to be different in a variety of contexts. Not only are their different types of literature, but also many styles for formatting these references (ALA, MLA, Harvard, et al.) From just the quick research I’ve done into citing poetry, long poem titles should be italicized, so I think to italicize the author in this particular case would be confusing.

I like the idea of microdata, but only within a much larger context in which several authors and works are cited, and a system is needed to maintain those connections.

Otherwise, I say leave it as it is: the semantics above aren’t inherently wrong. If it’s not broke, don’t fix it.

Dave says

I would go with:

[p][q]There was a young man from Nantucket[/q]
wrote [a href="foobar.com" rel="author"]John Keats[/a] in his [cite]Ode on a Grecian Urn[/cite].[/p]

Adam says

As always, go to the spec (though I notice that some have already referred to it:

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. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.)

I love the cheekiness in “even if people call that person a piece of work”.

So I am inclined to just leave it alone, perhaps using a <span> or <b> if I need to style it. If I want to do something useful with John Keats, I might use a condensed hcard as in:


<p><q>There was a young man from Nantucket</q> wrote <a href="http://en.wikipedia.org/wiki/John_Keats" class='hcard fn url'>John Keats</a> in his <cite>Ode on a Grecian Urn</cite>.</p>

But that is not particularly compelling. There is not much gained in it and the semantic value is really nothing. The problem is that there is no semantic association between the quote and the cite. Sure they’re both children of the same paragraph but there is no reason why you can’t have multiple quotes and citations in the same paragraph, or quotes without citations mixed with those that have citations. If there is a compelling reason to associate a quote with the citation and the author (or instance to allow some sort of bibliographic discovery) then a microformat could be crafted to do this.

Tom Leary says

I’m thinking it has to be B since the author is being set apart from the text, but the meaning would be the same.

Enrique Ramírez says

“The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.” So no.

“The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.” So, no.

“The cite element represents the title of a work, such as an article, a book, a poem, a song, a film, or any other creative work.” So, no.

There’s no real semantic tag available for this. A class (which may be part of a microformat, though I’m unsure there’s a standardized microformat for this specific scenario) would suffice. Also, if the author has a website, a link with a “rel” attribute might be the very best option.

lewismc says

Initially I would have been tempted to go with A as the <b> highlights the authors name (without any shouting) but then does the author require any semantics within this context?
I think, like Jack Lawson, I would plump for a span (no semantic meaning), and as implied by the inline style in D, I would consider offering an italic or boldness style but preferably through a class of author .
<span class="author"&gtAuthor Name</span&gt
Which lands me with E!

lewismc says

*<span class="author">Author Name</span>

Ms2ger says

E. Nothing at all. No i, b, or cite, no microdata or microformats, no styles. Nothing. Just plain text. There is absolutely no need to mark up or style author names differently from the surrounding text. (Examples in bibliographies notwithstanding, but that’s an entirely different use case.)

B says

I agree with E.

Author Name

Paul Watson says

After much thought I’m going for “A”.

I was nearly thrown by thinking of the <b> element in its presentational role in HTML4 and earlier, but then I remembered the W3C definition of the HTML5 <b> element:

The <b> element represents a span of text offset from its surrounding content without conveying any extra importance; for example, keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold text.

While not strictly a product name or keyword, I think the author’s name falls into the same semantic category. And of course, the <b> element can be styled using CSS to remove the browser-default bold styling, leaving it for purely semantic use.

Scott Povlot says

E. None of the above

The author name is not required to be styled or singled out. If needed a footnote could be used. In that case, a microformat might be appropriate.

Derek Johnson says

I’m going for E based on my understanding of the spec.

David says

A combination of A and E: use <b> to offset the author stylistically, but add the proper class from the hCard microformat.

gossi says

I think, this example above is loosy (at least for me and all those people in a scientific environment). Kevin Sweeney above noted some of this. I am going to be a sport scientists, so I need to follow the sport citation rules which are almost the same as the psychologic citation rules. Aside from just the title of the book/article/website/what else (that’s the type), there are a lot more information, too name a few: author(s), year, publisher, publisher’s city, title of the magazin, pages in that magazine, title of a book-band, relevant pages in that book-band and so forth.
The type of the resource defines how one needs to layout this (-> citation rules). All that have in common, that the cited-title needs to be italic, this is propably the use for <cite> element. What about the rest? I think this could be cleverly done with microformats. So, people could write browser addons searching for microformats, finding a referenced book and will look it up for the user on amazon or somewhere else.
Thats my E.

Jon says

I think this is one of the cases where the W3C Recommendation has got it wrong and gone against its “users over authors over browsers” philosophy.

Jeremy Keith explains things far more elegantly than I could: http://24ways.org/2009/incite-a-riot

My answer is C. That’s what makes semantic sense. That is if you really need to mark up the Author separately at all.

I’m surprised so many people have based their answer around how this would be styled and what the default styling is.

Steve Pugh says

E.

If it was a particularly structured site, say a dictionary of quotations, then I would mark the author with either <b> or <a>.

But most of the time, when the quotation plus attribution is merely a one off in a page of copy, I wouldn’t mark the author up at all.

That said, a lot of the time I’m working on sites where the only quotes are PR soundbites, so the author is the only source (i.e. there is no work as such) and in these cases I follow Jeremy Keith’s lead and use <cite> for the author name regardless of what the spec says.

I might add hcard microformat classes in some cases but I would query the utility of [hcard][fn]someone long dead[/fn][/hcard] with no additional (not even a link to wikipedia) information.

Matt Menzer says

E.

An author name is a significantly semantically different piece of information than the title of a work. To prevent a ambiguity that would make content difficult to consistently parse, it’s important that the usage of [cite] be restricted as the HTML5 spec currently does. Using [cite] for author names introduces a dangerous conflation.

In this case, if I wanted to sematically indicate the author of the passage, I would look for a relevant microformat or I would turn to a more semantically rich mechanism, such as microdata or rdf(a).

The issue is a little more complex if the work being cited is an untitled interview, but again the person being interviewed is not a work, and is therefore a different type of thing. A more complex semantic structure would be appropriate, or perhaps one could use [cite]Interview with Firstname Lastname[/cite]…

lucideer says

I’m going to answer a question with a question.

I’m going with E, because I don’t know the context – i.e. WHY do you want to markup the author. Depending on the answer to that WHY, some suggestions:

1. If you wish to markup “John Keats” in order to provide some parseable semantic metadata identifying him as the author, then none of A – D are going to cut it – you need either μF, μData or RDFa

2. If you wish to markup “John Keats” in order to style the author differently – again ask why do I want him styled differently:
2a. If you wish to style “John Keats” to emphasise that he is the author, <em/>
2b. If you wish to style “John Keats” to add variety and colour to your page for no particular semantic reason other than the fact it will look nicer (which is a perfectly legitimate thing to want to do) – then go with suggestion D above, though a semantic @class with external styles would probably be better practice.

3. If you wish to markup “John Keats” in order to access the author node via Javascript, go for D with @class or @id (depending on uniquity) instead of @style.

Erik says

When in doubt, use the marquee tag.

/woodsy_out

OK – all joking aside, I tend to agree with Matt Mezner and some of the other folks here on the same page.

I may not know the proper answer on how to properly mark up this section of a document, but I’m pretty sure that:

1) A and B are wrong because those tags are deprecated (right?) and they do not describe the content at all – they describe a styling of the content, which should be handled in CSS, not markup.

2) C is not right because as I recently discovered through this site (or was it elsewhere?) that it should only be used to mark up actual works of art (but then again, it wouldn’t blow up if you DID use it)

3) D is not right because that’s just plain silly. Again I go back to the fact that we’re trying to describe the content, not style it.

Erik Woods says

err I didn’t mean to say actual works of art. instead i just meant….. titles of… things. books, movies, music, etc. not necessarily ONLY art.

Josh says

The [b] and [i] tags are actually in the HTML5 specification. There exists an article on this site for the purpose of discussing the new semantic definitions of [i], [b], [em], and [strong].

[i] is, in HTML5, used for alternate voice (foreign words, technical terms, etc)
[b] is now used for items such as keywords.
[em] is now used for “stress emphasis” or something that you would pronounce differently. To be honest, I get the semantic definitions of this and [i] confused at times.
[strong] is now used for “importance” – nesting [strong] within other [strong] elements serves to increase the importance. Thus, in CSS, the first level of ‘strong’ can just be bold, text within two strong elements can be bold plus having a slightly-larger font size, and so on.

If there were really any way that someone would want to markup an author, I’m one of the people who believes that the hcard, or some microformat, should be used – at least to me this seems more favorable than using anything from A to D. There wouldn’t appear to be any major penalty for using any of those options, but if anything, I’d either not mark it up at all, or use hcard. The changing semantics of [cite] are becoming confusing to say the least. I and many others seem to use [cite] for book titles and the like, not marking up the author name…unless the author name happens to be the actual name of the book! Otherwise, someone could go to an author’s page and say, wow, this person made a lot of books that have the same exact title!!! Whether a new definition of semantics makes its way into the official standards or not, it would just seem to be ludicrous to have the cite element be the correct one to use for authors.

Now, {A} could work – in some cases. Like…if you’re using the HTML5 spec for [b] and the author is supposed to be a keyword. Then A would, I think, be the way to go. But that’s in certain cases, where you want the author name to be an actual keyword and not just a part of a publication’s microdata. If it’s something you want to put into microdata (microformat, hcard for ex.), then [span class="fn"]Foo[/span] [span class="ln"]Bar[/span] or something similar might be alright. But the only option with “span” is option D, which uses the style attribute, not a microformat class or something similar.

That’s my answer, whether or not it’s right, lol. If not, then I learn something new, which is a definite plus!

So…

A: The [b] tag could be used in certain cases if the author name is a keyword.

B: The [i] tag is for something that’s in a foreign language, technical terms, or something ‘stylistically-italicized’. If you intend the author name to be something that is…stylistically-italicized…then perhaps it could be used. Again, it’s possibly a case-by-case thing.

C: I just cannot see using the [cite] element for wrapping author names, unless the author name is indeed the name of the media.

D: No…just no.

E: See above.

Erik Woods says

I’m not sure why I thought <i> and <b> were deprecated. I mean I’ve been reading this site for a while now and I’ve been reading up on things…. I should have known better.

Maybe it’s because I disagree with it.

I think the problem with these old tags is….. we are preaching that style should be separated and strictly defined within CSS, yet we are still using these old tags which are still going to have a predefined and predetermined style associated with it on the browser side. Sure, any smart coder will likely have a reset file for their css, however – would it not make more sense to create new tags for the things we have re-purposed old tags for? Or am I asking too much? Those of us who have been in web design for a number of years will have no issues understanding why, when you use some of these tags, they are styled. However – those new to the game might ponder why this happens, if our coding is supposed to represent something that separates markup and style. I think we should practice what we preach. Who’s job it is to aid in that, I’m not sure. Browser makers or W3C?

Getting back on to the original question – I was recently asked in an interview to show a code example of how I would mark up a blog post, with the author’s name of the blog at the bottom, on its own line. I had to ask them if they wanted it done with an HTML5 mindset or XHTML. They wanted HTML5, so I explained that I wasn’t sure, since was now being used strictly for a titles work. Not knowing how to do it, the only thing that made sense to me (on the spot, at least) was to wrap the author’s name with an ID on a paragraph tag. Of course then they asked me if that was the only blog on the page – to which I answered yes, since they did not specify. Obviously, it would have otherwise been a class instead of an ID.

I wish I had seen this post before that interview though, as now I realize….. the general public seems to be uncertain on how to mark something like this up.

Josh says

I also find the <b> and <i> tags to be a bit…unsettling, to say the least. Of all the options there, either A or D get close, but not quite close enough. Whereas option A can be used in some cases (with the <b> tag), I am having trouble getting back into using tags like that myself. And D is almost there, but with style instead of class. I’ve used classes (but mostly short element and ID selectors) with CSS for a while now. Using the style attribute, for me, is something that’s becoming unfamiliar.

Wrapping the author name in a new <p> tag could indeed be another way of doing it that would be just as right as anything else, depending on how you want the information to flow. If every instance of a proper noun requires emphasis, then to me, that’d just be insane. Sometimes we come to that place where only semantics, or lack of any semantics, can decide what to use.

<b>Author Name</b>: If the author is a keyword, then this could be used according to the HTML5 spec, although this tag is something I stayed away from for so long.

<cite url="url.html">Author Name</cite>: If the author is the name of the media itself this very well could be used.

<span class="name">Author Name</span>: No semantic replacement, other than it is a generic ‘span’ declaring that the text within is a name using hcard classes.

Author Name: Sometimes no markup may be needed at all. Although, as above with classes, you may want to float it in some direction, use it as a visual clear, or do some other type of styling with it. If so, span with a class can still do it!

<i>Author Name</i>: If the author name is being referred to as a technical term or needs to be, um, “stylistically-offset”, then maybe this could work too, although I probably wouldn’t be seen using it in that way. If the author’s name is somehow declaring importance, as in “you need to meet {author name} within one hour or we’re all dead!”, then the <strong>Author Name</strong> could be used in that terrible, yet somehow hilarious, scenario. And using <em> for the tag may only be valid if the author’s name is used only to speak of him/her in a varying mood or using a different pronunciation. Much of this seems highly-unlikely, but again, some cases might allow it.

fjpoblam says

You suggested the <a> was “another subject” so… For your question, which is, simply, how to cite the author, my answer is C. You didn’t ask anything else, so I won’t answer anything else.

Erik Woods says

oops, in my last comment, my tags were actually rendered. sry about that. fixed below:

“They wanted HTML5, so I explained that I wasn’t sure, since <cite> was now being used strictly for a titles work. Not knowing how to do it….”

Erik V. says

I would like to revise my answer. Jeremy Keith is right.

bruce says

Thanks, as always, to all who commented.

And, yes, this quiz was designed to be a little tricksy.

In my opinion, the answer is to use the <cite> element. This is largely due to the design principle of paving the cowpath: the HTML 4 spec allowed the use of <cite> for names of people, even giving an example of it used thus. It’s used this way in millions of blogs – for example, we doctors use a skinned version of WordPress, and each commenter’s name is marked up <cite class="commentauthor">.

However, HTML5 breaks this backwards compatibility and napalms that cowpath, explicitly disallowing this use and therefore making this blog and millions of others contrary to spec. (Note, not invalid – no validator could ever know whether a string is a name of a person,or the name of a biography of that person).

I think this is wrong, and would continue the HTML 4 practice of citing authors’ names, too – with any microformats or microdata that floats your boat.

So the “right” answer is to use the <b> element if you want to give visual highlighting to the the name of the author. (Note, <b> and <i> are not deprecated: see our article The i, b, em, & strong elements).

Erik Woods says

I understand those tags are not deprecated – it was a mistake that I thought they were. Momentary brain farts I guess.

However, using a tag strictly for styling, as you have described above, sort of goes against the whole concept of separation of markup from styling, doesn’t it? Yeah, we should be using a css reset file for a lot of things like that and then re-defining them in our own CSS, but…. why can’t there be a new tag for something like this?

I don’t know… I just find it really hard to force myself to use <b> or <i> to style something when everyone preaches separation of markup from presentation. Perhaps I should focus more on what is semantically correct and hope that maybe some day browsers will not style these sort of elements for us?

Erik Woods says

I very much enjoy the fact I’ve not been bombarded with comments of people telling me that I am stupid or something.

Has the internet grown up or am I in some kind of dream blog where people are nice and actually want to discuss things properly and treat each other with respect?

:)

Ethan says

I agree that the answer is to use the [cite] element, because it’s HTML5 definition is ludicrous.

However, I would make sure to always add appropriate microformats/data to a [cite] when it’s being applied to an author rather than a work. This would help parsers in the future distinguish between title-of-work [cite]s and author [cite]s; yes, there will always be some uncertainty in parsers because of [cite]‘s prior, allowed usage, but good practices going forward will help reduce that.

Bractus says

So, I will vote for combination of cite and micro-format.

karl says

(Do I still have the right to play? :p)

* Not E. (repetition of the information)
* D, C, B are more or less the same thing for the amount of information
* A has a long description.

Between a long descriptive alt or a short one or empty one. My take is the decision is left to the author, because it all depends on the context of the article. Maybe this picture is just a dumb image, maybe this image is something used as a narrative description of a novel, maybe this a journal article, maybe this is an article on ribbon cutting techniques, etc, yada yada. :)

Basically the same images can be used in tons of context and then the alt will focus on different things or the prose around the image will explain.

Cecil Perie says

Is blogengine greater than hubpages in some manner? Has to be as it’s more and more popluar these days.

Cool_lena says

Wow, I never thought that the tag not outdated!

secondplanet says

I certainly do not like <i> or <b> and I don’t like that <span>. I would definitely cite people.

'Mash says

How does this relate to blockquotes? The funny thing is that it was only the other day I realised that the “something here” can only be a URL. I have been putting citation content there for ages.

<blockquote cite=”something here”>lorem ipsum doler<blockquote cite=”">

Why isn’t a citation style like the “Chicago Style” used as a standard?

'Mash says

How does this relate to blockquotes? The funny thing is that it was only the other day I realised that the “something here” can only be a URL. I have been putting citation content there for ages.

<blockquote cite=”something here”>lorem ipsum doler</blockquote>

Why isn’t a citation style like the “Chicago Style” used as a standard?

Gaston says

HTML5 definitely rocks, think, think think.

What if i have a long quote and want to show the author name, author company position and a photo of him/her?

is it ok? what do you think?


<blockquote>
<p>Blah blah blah..</p>
<p>Blah blah..</p>
<p>Blah..</p>
<footer>
<figure>
<img src="TBD" alt="Gaston M." title="Chief Excecutive Officer Gaston M." width= height=>
<figcaption><b>Gaston M.</b> <br><small>CEO ACME Inc.</small></figcaption>
</figure>
</footer>
</blockquote>

Killavus says

It should of course be B, because it’s a great example to use hCard microformat for this.

Yours
Martin

หี says

aColitEditExitfile Exclusive yes oh yse thecommon prefexter you der san

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.