In an <article>, can <figure> semantically be put inside <header>?

1.5k views Asked by At

Let's say I have this,

<article>
    <header>
        <h1>Article title</h1>
        <p>Article kicker</p>
        <figure>
            <img class="featured-image" src="http://article.com/featured/image.jpg">
        </figure>
    </header>
    <div class="content">
        <p>Bla bla</p>
        <p>Bla bla</p>
    </div>
    <footer>
        <p>About author</p>
    </footer>
</article>

Is it semantically correct to put the <figure> inside <header>?

The spec defines <figure> as,

a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document

If it is put inside <header> would that make the <figure> belongs to the head of the <article> instead of belongs to the <article> itself? Tried looking around but I haven't found an answer.

1

There are 1 answers

3
BoltClock On BEST ANSWER

The figure will still be part of the article. It just happens to be in the article header, which is fine if your figure is in fact part of the article header and not the main content of the article.

If you're asking in terms of sectioning, <header> and <footer> are not sectioning elements, and so the figure will still be part of the article's outline. That is, removing or commenting out the <header> and <footer> tags:

<article>
    <!-- header -->
        <h1>Article title</h1>
        <p>Article kicker</p>
        <figure>
            <img class="featured-image" src="http://article.com/featured/image.jpg">
        </figure>
    <!-- /header -->
    <div class="content">
        <p>Bla bla</p>
        <p>Bla bla</p>
    </div>
    <!-- footer -->
        <p>About author</p>
    <!-- /footer -->
</article>

results in the same outline.