How to handle headers in HTML5

Question

I need to migrate a website for an old magazine to HTML5 and I have some semantic problems. I have created the following outline to illustrate the main layout. There's a fiddle here.

<div id="wrapper">
    <header>

    </header>
    <nav>

    </nav>
    <main>
        <p><i>Name of Magazine</i>, 1985, 4, p. 12-14</p>
        <article>
            <header>            
                <h1>Heading</h1>
                <p>Subheading</p>
            </header>
            <figure>
                <img ...>
                <figcaption>
                    Caption.
                </figcaption>
            </figure>
            <p>First paragraph of article text.</p>
        </article>
    </main>
</div>

Above the magazine article there should always be a description including the name of the magazine, year, issue, pages, like I have in the paragraph element before the article element.

The first questions would be: Should I put that inside the article header instead? If so, would it be considered redundant to wrap the article element inside main tags? And is there a semantically suitable tag to specify this kind of info that is not really a part of the article but something intimately related to it?

In the original magazine (and on the html4 website) an image belonging to an article is sometimes placed on the same level as the article headings, like this (see fiddle here):

<main>
    <p><i>Magazine</i>, 1985, 4, p. 12-14</p>
    <article>
        <figure>
            <img ...>
            <figcaption>
                Caption.
            </figcaption>
        </figure>
        <header>            
            <h1>Heading</h1>
            <p>Subheading</p>
        </header>
        <p>...</p>
    </article>
</main>

Does it make sense not to have the header at the top inside the article element? More sense than to put the figure inside the header in this case?

That may be possible to fix with CSS instead (although I'd like to keep the floats on the figure elements), but occasionally I even find a variant with a full-width image above the heading: Fiddle No. 3 here If it could be argued that the image illustrates the whole article, maybe it could be part of the header in the same way that a logo is part of the main header of most web pages today? But in other cases, it seems like I have to stick stuff that belongs to the article on top of the header. On the other hand, since it's a semantic element it should be clear that it's a header anyway, even if it's positioned at the bottom.

How would you solve these things?

Answer 1

Should I put that inside the article header instead?

Yes. This is metadata about the article, not about the document, so it should be inside of article. And header is the appropriate element for this (footer might also be appropriate, as their differences aren’t strictly defined; however, I’d go with header in your case).

If so, would it be considered redundant to wrap the article element inside main tags?

No. Without specifying main, consumers could only guess (but wouldn’t know for sure) which is considered to be the main content of the page. Well, if the article is the only sectioning content element of body, the situation is pretty clear (what else could the main content be?), however, there might always be consumers that especially look for main, as well as the main role (which gets implicitly added when using the main element).

And is there a semantically suitable tag to specify this kind of info that is not really a part of the article but something intimately related to it?

If it’s metadata/content about this article (i.e., not the "main" content of that section), header and footer are appropriate.
If it’s content related to this article, the sectioning content element aside could be appropriate (it depends on the kind of relation if it should be used as child of article, which represents the article, or as child of body, which represents the document).

Does it make sense not to have the header at the top inside the article element?

Yes. A header doesn’t have to be at the top and a footer doesn’t have to be at the bottom. You can even have several header/footer elements for the same section.