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>
withitemscope
andBlogPost
to 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.
cite
is an inline style and you're wrapping it around multiple blocks (h1, article, footer, and header). I also want to sayaddress
is also misused, unless the URL goes to a page with her contact info. – Phenacite