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>

在杂志文章上面应该总是有一个描述，包括杂志的名称，年份，问题，页面，就像我在文章元素之前的段落元素中一样。

第一个问题是：我应该把它放在文章标题中吗？如果是这样，将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>

没有标题位于文章元素顶部是否有意义？在这种情况下，将图形置于标题内更有意义吗？

可能可以用CSS修复（虽然我想在图形元素上保留浮点数），但偶尔我甚至会在标题上方找到一个带有全宽图像的变体：{{3如果可以说图像说明了整篇文章，也许它可能是标题的一部分，就像徽标是今天大多数网页主标题的一部分一样？但在其他情况下，似乎我必须在标题上粘贴属于文章的东西。另一方面，由于它是一个语义元素，因此无论如何它都应该是一个标题，即使它位于底部。

你会如何解决这些问题？

Answer 1

我应该把它放在文章标题中吗？

是。这是关于文章的元数据，而不是关于文档的元数据，因此它应该是article的{{3}}。 header是适当的元素（footer也可能是合适的，因为它们的差异没有严格定义;但是，在你的情况下，我会选择header。< / p>

如果是这样，将article元素包装在main标签中会被视为多余吗？

没有。在没有指定main的情况下，消费者只能猜测（但不确定）哪些被认为是页面的主要内容。好吧，如果article是body的唯一分段内容元素，情况非常明确（主要内容还有什么？），但是，可能总会有消费者特别关注{ {1}}以及inside（使用main元素时会隐式添加）。

是否有一个语义上合适的标签来指定这种信息，这些信息实际上不是文章的一部分，而是与它密切相关的信息？

如果它的元数据/内容关于这篇文章（即main role），main和header是合适的。
如果与本文的内容相关，则切片内容元素footer not the "main" content of that section是合适的（could如果它应该用作{{1}的子项}，代表文章，或代表文档的aside的子代。

没有标题位于文章元素顶部是否有意义？

是。 article不必位于顶部，body不必位于底部。您甚至可以为同一部分添加depends on the kind of relation / header元素。

如何在HTML5中处理标头

1 个答案: