Re: valid code marked as invalid

Michael Stalcup <string.stalcup@gmail.com>, 2017-03-30 18:55 -0500:
> Archived-At: <http://www.w3.org/mid/2E13EE76-385D-4C73-8E09-3ECEFF187EC1@gmail.com>
> 
> I’m getting an error message that says:
> Error: Element div not allowed as child of element figure in this context
> 
> This is from the document at http://www.stringweb.com/marcicd/audio_video.php
> This is the code that generates the error:
> 
> <figure>
>   <header>
>     <h2>Scenes from the Musicals <i>RESPECT</i> and <i>Sistas</i></h2>
>   </header>
>   <figcaption>
>     <p>Scenes from the Minneapolis production of <i>RESPECT</i>, performed by the cast!</p>
>   </figcaption>
>   <div class="video-wrap">
>     <iframe src="https://www.youtube.com/embed/8zNg_LVUiU0?rel=0" allowfullscreen></iframe>
>   </div>
> </figure>

The reason that’s not valid is that the figcaption must either be the first
child element in the figure or the last child element.

The rationale for that requirement is that when rendered, the caption must
either come before the figure, or must come after the figure. It can’t be
in the middle of the figure.

So you could instead use the following markup:

<figure>
  <figcaption>
    <header>
      <h2>Scenes from the Musicals <i>RESPECT</i> and <i>Sistas</i></h2>
    </header>
    <p>Scenes from the Minneapolis production of <i>RESPECT</i>, performed by the cast!</p>
  </figcaption>
  <div class="video-wrap">
    <iframe src="https://www.youtube.com/embed/8zNg_LVUiU0?rel=0" allowfullscreen></iframe>
  </div>
</figure>

> From what I’ve read, all flow content is allowed inside the figure
> element, which would include a div element.

See https://html.spec.whatwg.org/multipage/semantics.html#the-figure-element

> Content model:
>   Either: One figcaption element followed by flow content.
>   Or: Flow content followed by one figcaption element.
>   Or: Flow content.

-- 
Michael[tm] Smith https://people.w3.org/mike