Question

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?

Answer 1

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.