My goal is to cite a blog post by using HTML microdata.
How can I improve the following markup for citations?
I am seeking improvements on the syntax and semantics, to produce a result that works well with HTML5 standards, renders well in current browsers, and parses well in search engines.
The bounty on this question is for expert advice and guidance. My research is turning up many opinions and snippets, so I'm seeking clear answers, complete samples, and canonical documentation.
This is my work in progress and I'm seeking advice on it's correctness:
Use
<div class="citation">to wrap everything.Use
<article>withitemscopeandBlogPostto wrap the post info including its nested info.Use
<header>and<h1 itemprop="headline">to wrap the post name link.Use
<cite>to wrap the post name.Use
<footer>to wrap the author info and blog info.Use
<address>to wrap the author link and name.Use
rel="author"to annotate the link to the author's name.Use
itemprop="isPartOf"to connect the post to the blog.
This is my work in progress HTML source:
<!-- Hello World authored by Alice posted on Bob's blog -->
<div class="citation">
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">
<a itemprop="url" href="…">
<cite itemprop="name">Hello World</cite>
</a>
</h1>
</header>
<footer>
authored by
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<address>
<a itemprop="url" rel="author" href="…">
<span itemprop="name">Alice</span>
</a>
</address>
</span>
posted on
<span itemprop="isPartOf" itemscope itemtype="http://schema.org/Blog">
<a itemprop="url" href="…">
<span itemprop="name">Bob's blog</span>
</a>
</span>
</footer>
</article>
</div>
Related notes thus far:
The
<cite>tag W3 reference says the tag is "phrase level", so it works like an inline span, not a block div. But the<article>tag seems to benefit from using<h1>,<header>,<footer>. As best I can tell, the spec does not give a solution for citing an article by using<cite>to wrap<article>. Is there a solution to this or a workaround? (The work in progress fudges this by using<div class="citation">)The
<address>tag W3 reference says the content "The address element must not be used to represent arbitrary addresses, unless those addresses are in fact the relevant contact information." As best I can tell, the spec does not give a solution for marking the article's author's URL and name, as distinct from the article's contact info. Is there a solution for this or a workaround? (The work in progress fudges this by using<address>for the author's URL and name)
Please ask questions in the comments. I will update this post as I learn more.
If you’d ask me which markup to use for a list of links to blog posts (OP’s context), without seeing your example, I’d go with something like this:
Using the sectioning content element
article, like in your example, is certainly possible, although perhaps unusual (if I understand your use case correctly): Asarticleis a sectioning content element, it creates an entry in the document outline, which may or may not be what you want for your case. (You can check the outline with the HTML5 Outliner, for example.)Another indication that a sectioning content element might not be the best choice: Your
articledoesn’t contain any actual "main" content. Simply said, the main content of a sectioning content element could be determined by stripping its metadata:header,footer, andaddresselements. (This is not a explicitly specified, but it follows from the defintions in Sections.)However, not having this content is not wrong. And one could easily imagine (and maybe you intend to do so anyway) that you’ll quote a snippet from the blog post (making this case similar to a search result entry), in which case you’d have:
I’ll further on assume that you want to use
article.Notes about your HTML5:
Semantically, the wrapping
divis not needed. You could add thecitationclass to thearticledirectly.The
headerelement is optional if it just contains a heading element (this element makes sense when your header consists of more than just a heading element). However, having it is not wrong, of course.I’d prefer to include the
aelement in theciteelement (similar to the fifth example in the spec).The
spanelement can only contain phrasing content, soaddressisn’t allowed as a child.The
addresselement must only be used if it contains contact information. So if this element is appropriate depends on what is available at the linked page: if it’s a contact form, yes; if it’s a list of authored blog posts, no.The
authorlink type might not be appropriate, as it’s defined to give information about the author of thearticleelement. But, strictly speaking, you are the author. If thearticlewould consist only of the blog post author’s actual content, using theauthorlink type would be appropriate; but in your case, you are writing the content ("authored by", "posted on").You might want to use the
externallink type for all external links.Notes about your Microdata:
You can specify the Schema.org properties
headlineandnamein the sameitemprop(separated with space).You might want to use Schema.org’s
citationproperty on thearticle(which requires that you specify a parent type ofCreativeWorkor one of its child types; i.e., it could beWebPageor maybe evenAboutPagein your case).Taking your example, this would give:
(All things considered, I still prefer the section-less variant.)