11

The following markup uses the figure element to display an image, inline with the text of a paragraph -- hence the figure is 'included' inside the first <p>.

<div class="object-content"> 
    <p>
        <figure class="object-inline-figure"> 
            <img 
                class="object-inline-figure-image" 
                height="200"
                src="/site_media/media/files/images/WH-487_opt.jpeg"
                width="300"> 
            <figcaption class="object-inline-figcaption">
                <p class="object-inline-figcaption-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p class="credits">
                    <span>Credit:&nbsp;</span>
                    <span class="object-inline-figcaption-caption-user-credit">
                        <a href="/profiles/Grey-Smith-Leigh/">Leigh Grey-Smith</a></span>,&nbsp;
                    <span class="object-inline-figcaption-caption-custom-credit">Lady Grey</span>
                </p>
            </figcaption> 
        </figure>
        The relationships between functional drivers and symbolic power, 
        landscape and architecture, site and context, quality of materials 
        and quality of experience are all well considered. This high quality 
        design resolution can, in part, be attributed to the relationship 
        between designer and client.</p>
</div>

However, this seems to problematic in at least Chrome and Firefox, that is, when using 'inspect element' (in Chrome), the <figure> and the <p> text/markup are reported to be like:

<p></p>
<figure>
    #...
</figure>
The relationships between functional drivers and symbolic power, 
landscape and architecture, site and context, quality of materials 
and quality of experience are all well considered. This high quality 
design resolution can, in part, be attributed to the relationship 
between designer and client.
<p></p>

Which effectively 'orphans' the text 'The relationships between...' outside of its <p> markup, losing its styling and semantic meaning... at least to the human viewer of the website page.

Moving the <figure> outside of the <p> seems to have more predictable results, i.e.:

<figure>
    #...
</figure>
<p>The relationships between functional drivers and symbolic power, 
landscape and architecture, site and context, quality of materials 
and quality of experience are all well considered. This high quality 
design resolution can, in part, be attributed to the relationship 
between designer and client.
</p>

But we kinda lose the 'textwrap' effect when the <figure> is text-aligned left or right.

  • Is this proper use of <figure> (the former example)?
  • Is the fault with the browser? (Safari/Firefox & Chrome all produce slightly different, unexpected interpretations)?
  • What 'should' the proper markup be?
Daryl
  • 1,469
  • 5
  • 18
  • 30

1 Answers1

13

The figure element is block level and therefore the behavior is correct. Permitted parent tags are those that allow flow elements - http://dev.w3.org/html5/markup/figure.html (example div, section, article...)

Therefore the figure tag should be placed outside the p tag. You can float it to allow for wrap.

LeRoy
  • 3,195
  • 4
  • 26
  • 23
  • Permitted parent elements of figure is "any element that can contain flow elements", where

    belongs to. http://w3c.github.io/html-reference/figure.html http://w3c.github.io/html-reference/common-models.html#common.elem.flow

     – maosmurf Jun 06 '16 at 10:47
  • It has been 5 years. I think the specification might have changed. – LeRoy Jun 28 '16 at 04:39
  • 1
    Sadly it has not: See https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element and https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element for reference, where `

    ` still only may contain "phrasing content".

     – fboes Aug 31 '18 at 15:49