HTML5 Simplequiz 5: URLs of commenters

by .

Here’s nice and simple Simplquiz for Christmas. Imagine a new site, with a news item in an <article> element. Within that are several user-submitted comments, each of which is in its own <article> element, as the spec recommends. Most commenting systems ask the commenter for his/ her URL, which is published in the header at the beginning of the comment, usually as a link with the commenter’s name as the linked text.

How would you code the URL of a person leaving a comment (assuming they provided one)? Remember that there may be multiple comments on any one page. Also note that we’re not going to worry about what element wraps each comment this time. Choose from the five options below, and explain your rationale in the comments.

A:

<header>
Comment by <a href="http://www.myspace.com/timbo/">Tim 
Berners-Lee</a>
</header>
WTF! LOL! U SUCK! KTHXBAI!

B:

<header>
Comment by <cite><a href="http://www.myspace.com/timbo">Tim 
Berners-Lee</a></cite>
</header>
WTF! LOL! U SUCK! KTHXBAI!

C:

<header>
Comment by <a href="http://www.myspace.com/timbo"><cite>Tim 
Berners-Lee</cite></a>
</header>
WTF! LOL! U SUCK! KTHXBAI!

D:

<footer>
Comment by <address><a href="http://www.myspace.com/timbo">Tim 
Berners-Lee</a></address>
</footer>
WTF! LOL! U SUCK! KTHXBAI!

E:

<h1>
Comment by <a href="http://www.myspace.com/timbo"><address>Tim 
Berners-Lee</address></a>
</h1>
WTF! LOL! U SUCK! KTHXBAI!

Your answers below, please, and show your working out. We’ll close comments and give our opinions on Wednesday 22 December.

Rules: It is THE LAW that you read the preceding comments before adding your own. 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.

55 Responses on the article “HTML5 Simplequiz 5: URLs of commenters”

Dave says

I’d personally use C. Although I would like an F option none of the above. As surely if they’re were more than on e comment this would be incorrect.

Adrian says

Personally, I prefer B. I think the cite should include the link as well.

Neonailol says

my choice is B
header means heading of section, in that case of comment
and tag cite according to specification means, that’s text in it is reference to another material

Ted Goas says

Oooh the first few options are tempting… but I’m going with Option D since the comment info is more like ‘author info’ than an article header. I think your “According to the spec” blockquote explains it quite nicely.

Anton Agestam says

I would use D, since the author of a comment isn’t really a main resource. The focus should be on the actual content of the comment and therefore I think is the most suitable element for the information about the author.

Keith Norman says

D is correct. A-C use cite incorrectly. E would be Ok, but D is the recommended use of footer and address, so it is the best choice.

dima4p says

Certainly A as the name in the link is not an address nor a citation

Jason says

Keep it simple, I say, go with A.

Bulat Shakirzyanov says

I’m not a frontend expert, but I do know that there must be only one ‘address’ element per page, and it represents the author of the current document. Same goes for ‘h1′ tag – one per page.
Now, just by looking at this page markup – the correct answer is B

Evan Mullins says

I prefer B.

I like the [cite] wrapping the [a] it seems more complete for some reason to me. I not sure I like the header though. I’m still getting used to it I guess. It looks funny/incomplete to since we’re not concerned with what element is containing the comments.

Kevin Sweeney says

Well in our last discussion on the subject of authors, I believe we decided <cite> was the way to go. So that makes it a question of B or C. Since the URL (and therefore, anchor tag) is optional, cite take priority over that. Additionally, you can argue that once you add the <a> tag, you are establishing a new relationship, which is from an author (i.e., the simple text of the author’s name)—not a citation—to a new URI.

Kevin Sweeney says

So, B—final answer :)

Mark Bennett says

D is the most correct for the following reasons:

Answer D uses the <footer> element rather than <header> or <h1>. To quote from the spec, [a] footer typically contains information about its section such as who wrote it. In contrast, a <header> element typically contains, a group of introductory or navigational aids. Therefore, we should use the <footer> element for this markup.

Already answer D is the only option as using the <footer> eliminates the other choices, but for the sake of argument let’s carry on with this exercise.

Answer D uses the <address> element rather than the <cite> element. The spec specifically indicates that the <cite> element represents the title of a work and carries on to say that, [a] person’s name is not the title of a work — even if people call that person a piece of work! Given that the <cite> element is out let’s consider the <address> element. The spec indicates that, [t]he <address> element represents the contact information for its nearest article or body element ancestor. Given that the comments are represented as <article> elements this is a perfect match for the comment author’s contact information.

Paul Mallet says

D : Event if it is situated on top of the comment, the author’s name and its website are footer informations (not like a title or a logo)

Matt Menzer says

D is correct.

Regardless of the prevailing popular opinion, <cite> must not be used for people (aside: because people and works are different entity types with different use cases; I don’t understand why this is such a difficult concept to grasp). The spec explicitly defines <footer>s as the element for contact information, and the spec also allows for multiple <address>es, each one providing contact info for it’s closes <article> or <body%gt; ancestor.

From the spec: “Typically, the address element would be included along with other information in a footer element.”

Natasha Nunn says

D – the address tag should be used for contact info – cite is for titles of works.

Bulat Shakirzyanov says

after (re-)reading the HTML5 spec for the above-stated elements, I must agree with option D being correct, thanks for an awesome quiz!

Richard Tape says

I’m fully in the ‘D’ camp as well. Mark Bennett’s answer above (16:31) explains it much better than I ever could, too.
I think, at first, using [footer] would seem counter-intuitive, but it’s certainly in line with the spec.

Merry Christmas everyone.

Brian Huisman says

As others have said, D is probably the “right” way. Personally though, I would use A and avoid the use of [cite] and [address] cruft in the comments. I would probably use the HTML link relation rel=”author” on the anchor element.

Ricardo says

I was going to vote for “A with a footer”, but after seeing that [address] can relate to [article], D has to be it.

Also, the cite element has no business here. http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element

A [blockquote] with the cite attribute would make sense though, if the comment came from an outside source.

WebDev says

Only A. Others suck!

Coby says

There has been extensive debate about why it is right to use <cite> with author names in willful violation of the current spec, and I agree that using <cite> for names is the right thing to do.

But a comment isn’t really a citation, it’s original content. Note that the comment is an <article>, not a <blockquote> or <quote>. That comment is probably nowhere to be found on http://myspace.com/timbo, so it’s not a citation, so <address> (D) might be the right answer after all.

But then we would have to mark up trackbacks differently. Trackbacks are commonly conflated with comments. Not sure how to handle that.

Steve says

My understanding is that <address> cannot be used as phrasing content, therefore D and E are invalid. If cite was used, then I think B is the correct way as the link is important to the citation, though I believe A is the best for the situation.

Arieh says

If we go only by specs, I would say footer>address>a, since it’s almost one by one specs wise.
BUT, I have a few issues with it:
- I believe there is a reason why we mostly find (in design, not markup) an author’s name in a message’s header, not it’s footer (ex – this site). It’s an important part of a message. In many post systems, It’s actually more important than the title (which doesn’t even exists in this system). It’s a mandatory, important part of the message. And so, it can be OK to put it in a header, since it is “introductory”. A second options would be to seperate the author name for the link. maybe:
<header>by Dug</header>
<p>Yeah! totaly</p>
<footer>
<address><a href=”http://some.site.com”></a>my site</address>
</footer>
Though it seems too much
- As I’ve said in other places, I don’t believe this is a good use for the address tag, but this is a problem I have with the specs (filed a bug, but I doubt they’ll change it). That said, I do believe the cite tag is quite adequate, and thus I would prefer it over address.

So my choice would be B all the way

Alohci says

None of the above.

A – This is kind of OK but semantically a bit light. It should be possible to do better.

B and C – As Coby pointed out, this is original content not a citation so <cite> cannot be correct, regardless of whether it wraps the anchor or not, and regardless of whether it is appropriate to mark up peoples names with the element.

D – The preamble to this simplequiz says: “… which is published in the header of the comment …”, so using the footer element cannot be correct, even though in other scenarios, footer might be the more common location for this information. I do not believe that we should follow slavishly every piece of non-normative text in the spec, ahead of using common sense and judgement about how a piece of information is being used.

There’s also the matter that Steve raised about using <address> as phrasing content. While he has a point, I can’t identify any constituency that ls disadvantaged by doing this, and it’s not invalid in HTML5, so I don’t consider it a problem. The use of the address element is adding useful and correct semantic information so it should be part of the correct solution.

E – The h1 element only allows phrasing content, so putting an address element inside it results in invalid mark-up. Although this doesn’t appear to cause any practical problems in current browsers, it seems an unnecessary risk to take when the header element is available.

Furthermore, the address element delimits the contact information for the article so it should wrap the anchor as that clearly forms part of the contact information.

So, in conclusion, my preference would be for D, but using header instead of footer.

However, this leaves a problem; the article doesn’t have any content to serve as a heading for the purposes of the outlining algorithm. It’s one reason why I don’t like the outlining algorithm much. One could use option D but with h1 either in place of footer, or inside of the header/footer element, but it’s impossible to nest h1 and address elements validly in any way. I’d like to see an addition to the outlining algorithm that allowed a div element with a boolean attribute (e.g. <div outline>) to be usable as heading content for the purposes of the outlining algorithm to resolve this problem.

Bruce Lawson says

@Alohci said “– The preamble to this simplequiz says: “… which is published in the header of the comment …”, so using the footer element cannot be correct, even though in other scenarios, footer might be the more common location for this information.”

Good point. I didn’t really mean the <header> element, so have changed it to say “at the beginning of the comment”. Please feel free to revise your opinion!

Alohci says

@Bruce – I didn’t mean that “header” automatically required <header>, more that it was indicative of how people thought about that information in the blog comment context. For that purpose “at the beginning” serves just as well. It’s clear that on this page at least, the “comment by” line is being treated as a header. Its font weight, as well as its positioning and absence of any other heading are, though not conclusive, clues that semantically the “comment by” line is a header not a footer. It fact, the only evidence that <footer> should be used is a single rule-of-thumb line of guidance in the HTML5 draft.

So I stand by my opinion above.

Luka says

Simple A

Dan Walsh says

I’m going for B. A doesn’t include the cite element, C nests the cite inside the A tag, D wraps the name and link in a footer and E uses an H1 when there should already be an h1 heading at the start of the document. Not sure if I’m correct but that’s how I see it.

Rasmus Fløe says

D – mos def.

zcorpan says

E is invalid, h1 only allows phrasing content as descendants.

D is bogus, address is paragraph-level, so “Comment by” is one paragraph and “Tim Berners-Lee” is another. You would want to wrap the whole sentence in the address.

B and C don’t match the spec — the spec says cite represents a title of work.

A seems fine.

Niels Matthijs says

Answer A

Like others said, a comment is not a citation so B and C won’t work.

As for the address tag, the given link is not necessarily contact information for the author of the comment. It could be (though a website is still pretty flaky as contact information ), but one could easily give up any link so semantically it’s better to be a little more generic and not just assume we’re dealing with contact information. It could be a little bit different if you would be adding the email address in the link.

Don’t agree with the use of footer in example D either. No matter what the spec says, author information is not just an afterthought but vital information to interpret a comment. Who says something is often just as important as what is being said, so it should really be in the header of the comment (or are we going to use footer tags to start a section?).

So A is the only option left. It’s nice to try and be as semantic as possible, but only when the extra meaning is actually meaningful.

Bruce Lawson says

Not too spammy at all. All debate is good.

Bruce Lawson says

Ah, a nice sneaky Simplequiz to end the year.

in my opinion, there are three contenders to being the answer.

The first is B – wrapping the name of the commenter, linked to her URL, in a cite element. That’s what we do on this blog (and so do bazillions of WordPress blogs). As you might remember from Simplequiz #2, doing this contravenes the spec (but the spec contravenes common sense and breaks backwards compatibility so was Hixie’s “XHTML2 moment”) so I’m reluctantly dismissing it as an option.

Then there’s D:

<footer>
Comment by <address><a href="http://www.myspace.com/timbo">Tim 
Berners-Lee</a></address>
</footer>
WTF! LOL! U SUCK! KTHXBAI!

A few of you liked this, as do I. Contrary to what some commenters said, it validates. The <address> element can’t be used inside a paragraph, but in this example, we’re not using a paragraph.

The address element can be used multiple times in a document: “The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.” http://dev.w3.org/html5/spec/sections.html#the-address-element

The same is true of the footer element: it can be used multiple times, even within the same container element and it doesn’t need to go at the end: “Footers don’t necessarily have to appear at the end of a section, though they usually do.”

My address-in-footers example shows using address in footer at the top (and at the bottom) of the same article. It validates.

The spec also says “Note: Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer.”

But does the commenter’s URL count as contact information? I think it probably does; after all, it’s what’s given by the commenter when she fills in the form.

But I also think option (A) – the plain hyperlink – is an excellent solution. I have a good deal of sympathy for Niels Matthijs’ blog post/ rant in which he says

It’s not because we have new elements to toy around with that we have to start bending ourselves in all different kinds of positions just to make sure we use them. When the situation calls for it and you can properly use the address or cite element, go right ahead (though I still object against the current use of address), but if there’s no fitting element, just leave it at that. Maybe html6 will fix it for you later on.

I think he’s convinced me.

But he definitely gives me a chance to make an important point: just because we have 30+ new elements, it doesn’t mean we have the ability to express every semantic under the sun all of a sudden. Sometimes, there just isn’t the right element for the job. There is no <name> element for marking up people’s names; neither is there a <geo> element for marking up co-ordinates. If these things matter to you, you can add extra semantics with RDFa, microformats or HTML5 microdata.

It’s important that HTML remain a general mark-up language. That’s why it’s easy to learn..

Mark Bennett says

Thanks for a great quiz Bruce. The HTML5 spec, and the new semantic tags, is still new to me but this quiz has helped me think more critically about why I’m using the new tags in my markup. The new semantic elements are useful; more so when there is consensus about their meaning and usage. Your comments show that isn’t always the case, but provide useful precedent when trying to write the clearest markup possible.

This tension between the semantics of tags in the spec, and the semantics of the tags in practice isn’t unique to HTML5 and reflects the inherent tension between any spec and it’s implementors. So far the HTML5 authors have done an excellent job of integrating current practices into the spec. Let us hope the authors of the HTML5 spec are reading this site!

Keep up the good work and the great discussions!

Niels Matthijs says

“Note: Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer.”

The interesting thing there is that both “contact information” and “author information” are combined in one single entity (a link on words).

Contact information could well belong in a footer section, but with comments I’m still convinced the author information should be placed in the header as it is vital to interpret the comment itself. Separating a link from its content isn’t all that easy though

chloe says

It’s a shame that there is no real html5 markup for comments. A lot of new tags have been added, some which will only be used in some few cases because most websites dont have the content it was created for.

So why is there no tag, it would be semantically usefull for search engines, it would help to layout this part of the document with css and lots of websites have a comments list under their articles.

Bruce Lawson says

I don’t see your logic there, Chloe. The HTML5 markup for a comment is an <article> inside the parent <article> of the comment:

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

http://dev.w3.org/html5/spec/sections.html#the-article-element

An nested article could also be a transcript of a video:


<article>
<h1>Kittens!</h1>
<video></video>
  <article>
  <h2>Kittens transcript</h2>
  ...
  </article>
</article>

Or a review of a book on a book selling site (or a review of a restaurant or hotel or laptop):


<article>
<h1>Introducing HTML5</h1>
<p>By Remy Sharp and Bruce Lawson</p>
..
  <article>
  <h2>The most marvellous tome ever</h2>
  <p>Five stars!</p>
  ...
  </article>
</article>

Whereas a <comment> element is much more limited than this construct.

Rob Crowther says

I’m a bit late getting in on this, but I would do it this way:

Comment by <a rel="author" href="http://www.myspace.com/timbo/">Tim
Berners-Lee</a>

Alohci says

@Rob. Excellent point. So my preferred markup is now:

<article>
<h1>Comment by <a rel="author" href="http://www.myspace.com/timbo/">Tim Berners-Lee</a></h1>
WTF! LOL! U SUCK! KTHXBAI!
</article>

since rel="author" requires the wrapper to be an article element, and h1 works better with the outlining algorithm than the header element does.

Hikari says

I’ll use B, considering it’s in the top of the comment body.

cite element is essential, and it should be outside the anchor because the anchor is part of the author info. I’d also use microformat tagging, which I don’t remember ATM but is used in my site’s theme.

In my understandment, address element is more related to phisical address then website link, after all we already have anchor element for that, and nothing assures the URL is the address of the author.

Beniji says

As pointed out, A is the best choice due to incorrect use of the cite element etc.

According to the spec, cite should only be used for the title of a piece of work.

Mladen says

According to w3.org

Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer.

Footers don’t necessarily have to appear at the end of a section, though they usually do.

So, I’d go with D

Mike Edward Moras (e-sushi™) says

My take…

<section>
<header> Joe says: </header>
<section> bla! </section>
<footer> Posted at <time datetime=”2010-01-15T01:23:45Z” pubdate=”pubdate”>3 am</header> as comment </footer>
</section>

Mike Edward Moras (e-sushi™) says

Btw: I don’t get why people would want to use “article” for comments.
The comment will be a part of an article… representing a stand-alone section of the article, but it’s not a sub-article.

toryburchoutletnew says

Thanks so much for providing individuals with such a spectacular possibility to read critical reviews from this web site. It is always very useful and also full of amusement for me personally and my office acquaintances to visit your web site no less than three times weekly to read the fresh guidance you have got. Of course, we are usually amazed for the surprising things served by you.

Killavus says

D is perfectly correct – it is a correct use of a <footer> tag and an <address> tag. Although I don’t know I’m not too lazy for it – when I’d be starting speedcoding, I’d prefer an A option, even it’s worse in a semantic way.

Yours
Martin

sitexplorer.yahoo.com says

sitexplorer.yahoo.com
This article is quite interesting. I enjoy you’re blogging sense, I hope you keep up the great blogging, I will definitely come back.

Cher Stewart says

@ Mike – Because nesting an article within an article gives it the role of being a subarticle, indicating it no longer needs to stand on its own to be tagged as an article. I would love to see this added to the role attribute to indicate that it is a subarticle.

www.sunglassesfactoryy.com says

Your ideas are too great. You analyze the problem from the point of view of new and original., From your point of view I learned many things. I quite agree with what you talk about.

Super Late says

None of the above, they all forgot rel=”nofollow” in the anchor tag.

fdgdf says

alert(“haii”);

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.