Further clarify "Contexts in which this element can be used"

This is a follow-up to #5768, and re-closes #5764 by introducing novel
phrasing to be more clear.

source

@@ -10343,12 +10343,15 @@ console.assert(image.height === 200);</code></pre>
     redundant with the content models of elements that allow this one as a child, and is provided
     only as a convenience.</p>
 
-    <p class="note">For simplicity, only the most specific expectations are listed. For example, an
-    element that is both <span>flow content</span> and <span>phrasing content</span> can be used
-    anywhere that either <span>flow content</span> or <span>phrasing content</span> is expected, but
-    since anywhere that <span>flow content</span> is expected, <span>phrasing content</span> is also
-    expected (since all <span>phrasing content</span> is <span>flow content</span>), only "where
-    <span>flow content</span> is expected" will be listed.</p>
+    <div class="note">
+     <p>For simplicity, only the most specific expectations are listed.</p>
+
+     <p>For example, all <span>phrasing content</span> is <span>flow content</span>. Thus, elements
+     that are <span>phrasing content</span> will only be listed as "where <span>phrasing
+     content</span> is expected", since this is the more-specific expectation. Anywhere that expects
+     <span>flow content</span> also expects <span>phrasing content</span>, and thus also meets this
+     expectation.</p>
+    </div>
    </dd>