如何在 HTML5 中处理 headers

Question

我需要将旧杂志的网站迁移到 HTML5，但我遇到了一些语义问题。我创建了以下大纲来说明主要布局。 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>

杂志文章上方应该始终有一个描述，包括杂志名称、年份、期号、页数，就像我在文章元素之前的段落元素中一样。

第一个问题是：我应该把它放在文章 header 中吗？如果是这样，将 article 元素包装在 main 标签中会被认为是多余的吗？是否有一个语义上合适的标签来指定这种实际上不是文章的一部分但与之密切相关的信息？

在原版杂志（以及 html4 网站上），属于文章的图片有时会与文章标题放在同一层级，如下所示 (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>

在 article 元素的顶部没有 header 有意义吗？在这种情况下，比将数字放在 header 内更有意义吗？

这也许可以用 CSS 来解决（虽然我想保留图形元素上的浮动），但偶尔我什至会发现上面有 full-width 图片的变体标题：Fiddle No. 3 here 如果可以说图像说明了整篇文章，也许它可以成为 header 的一部分，就像徽标是主要 header 的一部分一样今天大多数网页？但在其他情况下，似乎我必须将属于文章的内容粘贴到 header 之上。另一方面，由于它是一个语义元素，所以应该清楚它无论如何都是 header，即使它位于底部。

你会如何解决这些问题？

Answer 1

Should I put that inside the article header instead?

是的。这是关于文章的元数据，而不是关于文档的元数据，因此它应该是 inside of article。 header 是合适的元素（footer 也可能是合适的，因为它们的差异没有严格定义；但是，在你的情况下我会选择 header）。

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

没有。如果不指定 main，消费者只能猜测（但不能确定）哪些被认为是页面的主要内容。好吧，如果 article 是 body 的唯一分段内容元素，情况就很清楚了（主要内容还可以是什么？），但是，可能总会有消费者特别寻找 main，以及 main role（在使用 main 元素时隐式添加）。

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?

如果是metadata/content关于这篇文章（即not the "main" content of that section），header和footer是合适的。
如果它的内容 related 到这篇文章，sectioning 内容元素 aside could be appropriate (it depends on the kind of relation 如果它应该被用作 article 的子元素，它代表这篇文章，或作为代表文档的 body 的子项）。

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

是的。 header 不必位于顶部，footer 不必位于底部。您甚至可以在同一部分包含 several header/footer 个元素。

如何在 HTML5 中处理 headers

How to handle headers in HTML5

html

header

semantic-markup

figure