title: html5, figure/figcaption inside a paragraph gives unpredictable output
body: <p>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 <code>&lt;p&gt;</code>.</p>
  
  <pre><code>&lt;div class="object-content"&gt; 
      &lt;p&gt;
          &lt;figure class="object-inline-figure"&gt; 
              &lt;img 
                  class="object-inline-figure-image" 
                  height="200"
                  src="/site_media/media/files/images/WH-487_opt.jpeg"
                  width="300"&gt; 
              &lt;figcaption class="object-inline-figcaption"&gt;
                  &lt;p class="object-inline-figcaption-caption"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
                  &lt;p class="credits"&gt;
                      &lt;span&gt;Credit:&amp;nbsp;&lt;/span&gt;
                      &lt;span class="object-inline-figcaption-caption-user-credit"&gt;
                          &lt;a href="/profiles/Grey-Smith-Leigh/"&gt;Leigh Grey-Smith&lt;/a&gt;&lt;/span&gt;,&amp;nbsp;
                      &lt;span class="object-inline-figcaption-caption-custom-credit"&gt;Lady Grey&lt;/span&gt;
                  &lt;/p&gt;
              &lt;/figcaption&gt; 
          &lt;/figure&gt;
          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.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, this seems to problematic in at least Chrome and Firefox, that is, when using 'inspect element' (in Chrome), the <code>&lt;figure&gt;</code> and the <code>&lt;p&gt;</code> text/markup are reported to be like:</p>
  
  <pre><code>&lt;p&gt;&lt;/p&gt;
  &lt;figure&gt;
      #...
  &lt;/figure&gt;
  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.
  &lt;p&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Which effectively 'orphans' the text 'The relationships between...' outside of its <code>&lt;p&gt;</code> markup, losing its styling and semantic meaning... at least to the human viewer of the website page.</p>
  
  <p>Moving the <code>&lt;figure&gt;</code> outside of the <code>&lt;p&gt;</code> seems to have more predictable results, i.e.:</p>
  
  <pre><code>&lt;figure&gt;
      #...
  &lt;/figure&gt;
  &lt;p&gt;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.
  &lt;/p&gt;
  </code></pre>
  
  <p>But we kinda lose the 'textwrap' effect when the <code>&lt;figure&gt;</code> is <code>text-align</code>ed left or right.</p>
  
  <ul>
  <li>Is this proper use of <code>&lt;figure&gt;</code> (the former example)?</li>
  <li>Is the fault with the browser? (Safari/Firefox &amp; Chrome all produce slightly different, unexpected interpretations)?</li>
  <li>What 'should' the proper markup be?</li>
  </ul>