htmlsemantic-markuparticle

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

Use case is a blog post:

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

Each post has a feature image. Does this image belong semantically to <header>, or does it not matter (ie. anywhere in <article>)?

I wish to present the image above the meta info, ie. the existing <header>. Visually, I guess it would sort of comprise the header area (ie. the stuff before the post body), but it would not necessarily communicate meta information about the post. If the lead image should not be part of <header>, this would mean it is also above <header>.

(Despite presence of a <header> at top of page, multiple in-page <header>s are permitted where semantically justified).

However, found documentation tends to pertain to the top-of-page header use of <header> alone:

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
Solution

  • As you've quoted, a header element "represents introductory content" of a sectioning element. If you consider an article's main image to be part of its introductory content, it would make sense to place it within the header element.

    I've omitted schema structured data for readability.

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

    However, if you want to visually place an image before the header content, but still keep it after the header content in the document flow, you can use CSS to change the position it's rendered in. An easy way to do this would be with the order property and CSS Flexbox or CSS Grid. This will change the visual presentation order, but keep the document flow the same. Assistive tech will present content in the order of the document flow.

    This may be the best solution, because generally one expects to encounter the title of an article first, before anything else.

    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>

    Additional notes: