Semantic markup of multiple articles inside article with preambles/postscript

Question

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?

score 0 · Accepted Answer · edited May 23 '17 at 12:20

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 inner article 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>

Thanks again for an informative reply. Yes, I agree that `h1` (not `h2`) is what I should use for each subarticle heading ("First text heading" in your example), but I don't understand why you put it before the header instead of inside it. Would that be inappropriate in this case? — linurb, Jan 29 '15 at 14:26
@linurb: You don’t have to use `h1` (in fact, HTML5 [recommends](http://stackoverflow.com/a/24987792/1591669) to use "headings of the appropriate rank for the section's nesting level"). -- Regarding `header`: Yes, it’s appropriate and common to include the heading in `header`. — unor, Jan 29 '15 at 15:33

Semantic markup of multiple articles inside article with preambles/postscript

1 Answers1