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.
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:results in the same outline.