<article> 图片应该放在文章 <header> 中吗？

Question

用例是博客 post:

<article> 元素在 <main> 中使用，以包含 post 页面上的文章。
<header> 在 <article> 中使用，包含 <h1> 标题和元数据，包括作者、日期戳等

    <article class="card bg-white">
        <header>
            <div class="card-img-top p-0">
                <a href="image.jpg" title="Article title"><img width="1414" height="1011" src="image.jpg 1200w" sizes="(max-width: 1414px) 100vw, 1414px"></a>
            </div>
            <h1 class="entry-title" itemprop="headline">
                <a href="article-url" title="Article title" rel="bookmark">Article title</a>
            </h1>
            <div class="entry-meta">
                <span class="author vcard" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><span itemprop="name"><a href="/author/joe-bloggs" title="Posts by Joe Bloggs" rel="author">Joe Bloggs</a></span></span>
                <span class="meta-sep"> | </span>
                <time class="entry-date" datetime="2022-03-14T14:28:33+00:00" title="March 14, 2022, 2:28 pm" itemprop="datePublished">14 March 2022</time>
                <meta itemprop="dateModified" content="14 March 2022">
            </div>
        </header>
        <div class="entry-content" itemprop="mainEntityOfPage">
            <meta itemprop="description" content="Excerpt for article">
            <p>Article text.</p>
            <p>Article text.</p>
            <p>Article text.</p>
        </div>
    </article>

每个 post 都有一张特色图片。此图像在语义上属于 <header>，还是无关紧要（即 <article> 中的任何地方）？

我希望在元信息上方显示图像，即。现有 <header>。从视觉上看，我猜它会包含 header 区域（即 post body 之前的内容），但它不一定会传达有关 post 的元信息.如果主图不应该是 <header> 的一部分，这意味着它也在以上 <header>.

（尽管页面顶部有一个 <header>，但多个 in-page <header> 在语义上是 permitted。

然而，发现 documentation 往往与 top-of-page header 单独使用 <header> 有关：

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

one or more heading elements (<h1> - <h6>)

logo or icon

authorship

Answer 1

正如您所引用的那样，header 元素“代表分段元素的介绍性内容”。如果您认为一篇文章的主要图片是其介绍性内容的一部分，那么将它放在 header 元素中是有意义的。

为了便于阅读，我省略了模式结构化数据。

<article>
  <header>
    <img alt="A kitten." src="/images/kitten.jpg" width="100" height="100">
    <h1>The cutest kitten</h1>
    <ul aria-label="Article metadata.">
      <li>Author: <a href="/authors/katrina-whisker/" rel="author">Katrina Wisquer</a></li>
      <li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
    </ul>
  </header>
  <p>There once was a cute kitten who...</p>
</article>

但是，如果您希望在视觉上将图像放在 header 内容之前，但在文档流中仍将其保留在 header 内容之后，您可以使用 CSS 来更改它的渲染位置。一个简单的方法是使用 order property and CSS Flexbox or CSS Grid。这将改变视觉呈现顺序，但保持文档流不变。辅助技术将按照文档流的顺序呈现内容。

这可能是最好的解决方案，因为通常人们希望首先看到一篇文章的标题，然后才是其他任何事情。

article {
  display: flex;
  flex-direction: column;
  margin: 1rem;
  padding: 1rem;
  border: 1px solid black;
}
.article-image {
  order: 1;
}
.article-header {
  order: 2;
}
.article-body {
  order: 3;
}

<article>
  <header class="article-header">
    <h1>The cutest kitten</h1>
    <ul aria-label="Article metadata.">
      <li>Author: <a href="/authors/katrina-whisker/" rel="author">Katrina Wisquer</a></li>
      <li>Published: <time datetime="2022-03-14T14:28:33+00:00">14 March 2022</time></li>
    </ul>
  </header>
  <img class="article-image" alt="Kittens." src="https://placekitten.com/200/100" width="200" height="100">
  <div class="article-body">
    <p>There once was a cute kitten who...</p>
  </div>
</article>

补充说明：

不要忘记图像上的 alt 属性
在无序列表中标记文章元数据比具有跨度的 <div> 更具语义。
您似乎过度使用和滥用了 title attribute

<article> 图片应该放在文章 <header> 中吗？

Should an <article> image go inside article's <header>?

html

semantic-markup

article