As part of a project mentioned in connection with another question I need to markup nested articles in semantic HTML5. There's a magazine article containing a number of short texts by different authors plus some editor comments. In the present HTML4 version it looks something like this:
<div id="article">
<h1>Main heading - a collection of texts</h1>
<p id="intro">
A general introduction to the whole collection by the editor.
</p>
<p class="preamble">
A few words from the editor about the first text.
</p>
<h2>First text heading</h2>
<p>First text. Lorem ipsum ...</p>
<p class="author">
Name of author of first text.
</p>
<div>*</div>
<p class="preamble">
A few words from the editor about the second text.
</p>
<h2>Second text heading</h2>
<p>Second text. Dolorem ipsum ...</p>
<p class="author">
Name of author of second text.
</p>
<p id="postscript">
Some final words about the whole collection by the editor.
</p>
<div>
I have been considering something like this in HTML5, but there are some elements where I simply don't know what's best:
<article>
<header>
<h1>Main heading</h1>
<ELEMENT>
General introduction
</ELEMENT>
</header>
<article>
<header>
<ELEMENT>
Preamble
</ELEMENT>
<h2>
Article heading
</h2>
</header>
<p>
Article text
</p>
<ELEMENT>
Name of author
</ELEMENT>
</article>
<div>*</div>
<article>
Second article ...
</article>
<ELEMENT>
Postscript by editor
</ELEMENT>
</article>
Should I use a p
element with class names for the various introductions and postscript, or maybe aside
elements? Something else? And the same question regarding the names of authors. The address
element doesn't seem quite right there. A footer
perhaps with some other element (?) in it?
Edit: Occasionally there are some images as well and the photographer is mentioned in small print at the end of the article ("Photo: John Doe."). Element x inside a footer
?
I think the first question should be where to put the editor comment for an article. I can think of three ways:
(a) editor comment in the header
of an article
<article class="author-text">
<header class="editor-comment"></header>
</article>
(b) editor comment in an article
that is nested in an article
<article class="author-text">
<article class="editor-comment"></article>
</article>
(c) editor comment in a section
that has the article
as child
<section class="editor-comment">
<article class="author-text"></article>
</section>
You are using (a) in your question. I don’t think it’s the best choice, mainly because this article
would contain content from different authors (that did not work together), so the concept of "nearest article
element ancestor" for denoting authorship wouldn’t work. It’s used, for example, by the author
link type and the address
element.
(b) and (c) don’t have this problem. In (b), each editor could have their own authorship info, in (c) the authorship info for the editor would be taken from the parent article
(which includes the whole collection of articles), so the editor would have to be same everytime.
The definition of article
suggests that (b) is appropriate:
When
article
elements are nested, the innerarticle
elements represent articles that are in principle related to the contents of the outer article.
It would make sense to include this editor comment article
in a header
.
The authorship information could be placed in a footer
. Only if this information contains contact information for the author, use an address
element in addition (and only for these contact information parts).
So a single short text could look like this:
<article class="author-text">
<h1>First text heading</h1>
<header>
<article>
<p>Editor comment</p>
</article>
</header>
<p>First paragraph of the text …</p>
<footer>
<!-- text author information -->
<!-- use 'address' here if appropriate -->
</footer>
</article>
The whole collection could be structured like this:
<article class="text-collection">
<h1>Main heading</h1>
<p>General introduction</p>
<article class="author-text"></article>
<article class="author-text"></article>
<article class="author-text"></article>
<article class="author-text"></article>
<p>Postscript by editor</p>
</article>